Jump to content

POWERED BY:

FabianoSouza

Aplicar border radius em mouseover numa TR

By FabianoSouza, in HTML e CSS

Recommended Posts

FabianoSouza    5

FabianoSouza
Posted

Gente, tenho as TRs da minha tabele já com os cantos arredondados (através das TDs first-child e last-child). Fiz dessa forma porque desconheço uma maneira de aplicar radius diretamente na TR.

 

O problema é que ao colorir a TR com o over do CSS, perde-se a formatação do border radius das TDs e exibe a TR com os cantos quadrados.

 

Preciso que os cantos fiquem arredondados mesmo ao passar o mouse sobre a TR.

 

Como resolvo isso?

Share this post

Link to post
Share on other sites

tetsuo    0

tetsuo
Posted

border-radius não se aplica a trs
tente aplicando nas tds 

tr:hover td:first-child{

 border-radius: 8px 0 0 8px;

}

tr:hover td:last-child{

 border-radius:0 8px 8px 0;

}

 

Share this post

Link to post
Share on other sites

Marcos_imasters    288

Marcos_imasters
Posted

tentou usar pseudo ::before e ::after ??  

/* arredondar as células da primeira e última coluna */
tr td:first-child::before,
tr td:last-child::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px; 
    background-color: white; 
}

/* primeira coluna */
tr td:first-child::before {
    left: 0;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
}

/* última coluna */
tr td:last-child::after {
    right: 0;
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
}

/* quando o mouse passa sobre ela */
tr:hover {
    background-color: #000; 
}

 

Share this post

Link to post
Share on other sites

FabianoSouza    5

FabianoSouza
Posted
4 horas atrás, Marcos_imasters disse:

tentou usar pseudo ::before e ::after ??  


/* arredondar as células da primeira e última coluna */
tr td:first-child::before,
tr td:last-child::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px; 
    background-color: white; 
}

/* primeira coluna */
tr td:first-child::before {
    left: 0;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
}

/* última coluna */
tr td:last-child::after {
    right: 0;
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
}

/* quando o mouse passa sobre ela */
tr:hover {
    background-color: #000; 
}

 

Infelizmente não funciona.

Veja abaixo o código completo, CSS + HTML.

  

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
table {padding:0 10px 0 10px; 
}

/* arredondar as células da primeira e última coluna */
tr td:first-child::before,
tr td:last-child::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px; 
    background-color: white; 
}

/* primeira coluna */
tr td:first-child::before {
    left: 0;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
}

/* última coluna */
tr td:last-child::after {
    right: 0;
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
}

/* quando o mouse passa sobre ela */
tr:hover {
    background-color: #000; 
}
</style>
</head>

<body>
<table width="200" border="1">
		<tr>
				<td> </td>
				<td> </td>
				<td> </td>
		</tr>
		<tr>
				<td> </td>
				<td> </td>
				<td> </td>
		</tr>
		<tr>
				<td> </td>
				<td> </td>
				<td> </td>
		</tr>
		<tr>
				<td> </td>
				<td> </td>
				<td> </td>
		</tr>
		<tr>
				<td> </td>
				<td> </td>
				<td> </td>
		</tr>
		<tr>
				<td> </td>
				<td> </td>
				<td> </td>
		</tr>
		<tr>
				<td> </td>
				<td> </td>
				<td> </td>
		</tr>
		<tr>
				<td> </td>
				<td> </td>
				<td> </td>
		</tr>
		<tr>
				<td> </td>
				<td> </td>
				<td> </td>
		</tr>
		<tr>
				<td> </td>
				<td> </td>
				<td> </td>
		</tr>
</table>

</body>
</html>

 

Share this post

Link to post
Share on other sites

FabianoSouza    5

FabianoSouza
Posted
Em 02/09/2023 at 00:08, tetsuo disse:

border-radius não se aplica a trs
tente aplicando nas tds 


tr:hover td:first-child{

 border-radius: 8px 0 0 8px;

}

tr:hover td:last-child{

 border-radius:0 8px 8px 0;

}

 

Infelizmente não funcionou.

Share this post

Link to post
Share on other sites

Marcos_imasters    288

Marcos_imasters
Posted 
table {
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
     border: 2px solid #ccc;
    border-radius: 10px;
   overflow: hidden;
}

tr {
     background-color: #333; 
    position: relative; 
    border-radius: 10px;
    transition: background-color 0.3s;
}


td {
    border: 1px solid #555;
    padding: 10px 30px;
    color: #FFF;
}
tr:hover td {
    background-color: red; 
}

ainda nao entedir a forma que voce deseja coloquei como você ja fez seria isso?

Share this post

Link to post
Share on other sites

FabianoSouza    5

FabianoSouza
Posted
4 horas atrás, Marcos_imasters disse: 

table {
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
     border: 2px solid #ccc;
    border-radius: 10px;
   overflow: hidden;
}

tr {
     background-color: #333; 
    position: relative; 
    border-radius: 10px;
    transition: background-color 0.3s;
}


td {
    border: 1px solid #555;
    padding: 10px 30px;
    color: #FFF;
}
tr:hover td {
    background-color: red; 
}


ainda nao entedir a forma que voce deseja coloquei como você ja fez seria isso?

 

Oi @Marcos_imasters. Obrigado pela atenção ao meu problema.

 

Eu preciso que as TDs (primeira e última, de cada LINHA) fiquem com os cantos arredondados. 

Parece que a sua sugestão é para colunas.

 

Eu quero que pareça que cada TR tenha seus cantos arredondados. Como não é possível fazer isso diretamente na TR, preciso que a primeira e a última TD de cada LINHA tenha seus cantos arredondados.

Sendo a primeira TD (da cada linha) com o lado esquerdo arredondado, e a última TD (de cada linha) com o lado direito arredondado.

 

Share this post

Link to post
Share on other sites

Marcos_imasters    288

Marcos_imasters
Posted
20 horas atrás, FabianoSouza disse:

 

Oi @Marcos_imasters. Obrigado pela atenção ao meu problema.

 

Eu preciso que as TDs (primeira e última, de cada LINHA) fiquem com os cantos arredondados. 

Parece que a sua sugestão é para colunas.

 

Eu quero que pareça que cada TR tenha seus cantos arredondados. Como não é possível fazer isso diretamente na TR, preciso que a primeira e a última TD de cada LINHA tenha seus cantos arredondados.

Sendo a primeira TD (da cada linha) com o lado esquerdo arredondado, e a última TD (de cada linha) com o lado direito arredondado.

 

Seria que nem o  washalbano disse?  

table {
  border-spacing: 1em;
  border-collapse: separate;
}
tr {
    background-color: #333; 
    position: relative; 
    border-radius: 10px;
    transition: background-color 0.3s;
}
tr:hover td {
    background-color: red; 
}
td {
  padding: 1rem 1.2rem;
  border-radius: 6px;
    border: 1px solid #555;
    color: #FFF;
}

 

Share this post

Link to post
Share on other sites

FabianoSouza    5

FabianoSouza
Posted
10 horas atrás, Marcos_imasters disse:

Seria que nem o  washalbano disse?  


table {
  border-spacing: 1em;
  border-collapse: separate;
}
tr {
    background-color: #333; 
    position: relative; 
    border-radius: 10px;
    transition: background-color 0.3s;
}
tr:hover td {
    background-color: red; 
}
td {
  padding: 1rem 1.2rem;
  border-radius: 6px;
    border: 1px solid #555;
    color: #FFF;
}

 

Quase lá! Rsrs... O problema é o no hover do mouse... 

 

Se eu aplicar uma cor de fundo da TR no hover do mouse, perde-se o efeito de arredondamento das TD (primeira e última), a linha (TR) fica no estado normal (cantos quadrados)..

 

Share this post

Link to post
Share on other sites

FabianoSouza    5

FabianoSouza
Posted
Em 07/09/2023 at 00:10, washalbano disse:

GEcQPlFNSz283-ZitMF4vQ.png
consegue me mostrar screenshot de como ficou?

 

Show!! Agora funcionou perfeitamente @washalbano!!!
Muuuito obrigado, meu caro!!

Eu nunca vi essa estrutura de CSS que você criou. É isso que chamam de CSS aninhado? Me fala qual é o nome dessa técnica/macete para eu pesquisar mais.

 

Valew!!!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing HTML e CSS

  • Similar Content

    • juliosonic
      Menu Navbar CSS Bootstrap
      By juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Felipe Medeiros
      Como alterar o tema filho se o css usado no tema pai nao está dentro da pasta do tema pai?
      By Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Alessandro Bodão
      H1 que preencha toda a largura da container
      By Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • viniciusfroner
      "echo" Mensagem ERROR
      By viniciusfroner
      Tenho um pequeno sistema de envio, estou utilizando o "PHPMailerAutoload". Após o usuário inserir as informações e clicar em enviar a mensagem é enviada com sucesso, o único problema é que apresentado ao usuário a seguinte mensagem:
      if ($enviado){ echo "E-mail enviado com sucesso!"; } else { echo "Não foi possível enviar o e-mail."; echo "<b>Informações do erro:</b> " . $msg->ErrorInfo; } Acabei procurando e não achei como posso remover a mensagem "Error:"
    • Alessandro Bodão
      Projeto de Branding
      By Alessandro Bodão
      Salve galerinha, passando pra mostrar pra vocês o novo projeto de marca que a Jatobá Estúdio desenvolveu, espero que gostem.   https://www.behance.net/gallery/166555627/Fernanda-Pinheiro-Nutricionista-Esportiva
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept