Aplicar border radius em mouseover numa TR

FabianoSouza · Agosto 31, 2023

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?

tetsuo · Setembro 2, 2023

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;

}

Marcos_imasters · Setembro 4, 2023

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; 
}

FabianoSouza · Setembro 4, 2023

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>

FabianoSouza · Setembro 4, 2023

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.

Marcos_imasters · Setembro 5, 2023

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?

FabianoSouza · Setembro 5, 2023

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.

washalbano · Setembro 5, 2023

https://codepen.io/w ashalbano/pen/bGOBwKr

Marcos_imasters · Setembro 6, 2023

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;
}

FabianoSouza · Setembro 6, 2023

Em 05/09/2023 at 12:52, washalbano disse:

https://codepen.io/w ashalbano/pen/bGOBwKr

FabianoSouza · Setembro 6, 2023

Em 05/09/2023 at 12:52, washalbano disse:

https://codepen.io/w ashalbano/pen/bGOBwKr

Opa @washalbano!!!
Só preciso testar aqui se funciona mesmo passando o mouse sobre a TR e a colorindo, se mantém o arredondamento das TD (primeira e última de da respectiva linha).

FabianoSouza · Setembro 6, 2023

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)..

washalbano · Setembro 7, 2023

consegue me mostrar screenshot de como ficou?

washalbano · Setembro 7, 2023

consegue me mostrar screenshot de como ficou?

Marcos_imasters · Setembro 8, 2023

aqui no meu funciona normal o hover nao será seu navegador qual esta usando?

FabianoSouza · Setembro 8, 2023

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

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!!!

Aplicar border radius em mouseover numa TR

Recommended Posts

FabianoSouza 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

tetsuo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos_imasters 288

Compartilhar este post

Link para o post

Compartilhar em outros sites

FabianoSouza 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

FabianoSouza 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos_imasters 288

Compartilhar este post

Link para o post

Compartilhar em outros sites

FabianoSouza 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

washalbano 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos_imasters 288

Compartilhar este post

Link para o post

Compartilhar em outros sites

FabianoSouza 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

FabianoSouza 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

FabianoSouza 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

washalbano 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

washalbano 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos_imasters 288

Compartilhar este post

Link para o post

Compartilhar em outros sites

FabianoSouza 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Fóruns

Tempo Real

Informação importante