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

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Conteúdo Similar

Fóruns

Tempo Real

Informação importante