Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
A borda com efeito hover está sobrepondo com a borda default
.listaContato { height: 28px; line-height: 28px; padding-left: 17px; font-family: Segoe UI, Tahoma, Verdana, Arabic Transparent; font-size: 11px; }
.listaContato:first-child:nth-child(1) { border: 1px solid #DFDFDF; }
.listaContato:not(:first-child){ border: 1px solid #DFDFDF; border-top: none; }
.listaContato:first-child:nth-child(1):hover { border: 1px solid #BBD8FB; background-color: #F7F3FD; cursor: pointer; }
.listaContato:not(:first-child):hover { border: 1px solid #BBD8FB; background-color: #F7F3FD; cursor: pointer; }
Como eu faço para nao ter essa sobreposição ?
Este exemplo
http://imageshack.us/photo/my-images/132/semttuloikb.jpg/
é um exemplo errado, pois parece que a borda top está com 2px mas na verdade está com 1px.
como deveria ficar é assim
http://imageshack.us/photo/my-images/189/semttulo2ng.jpg/
para qualquer hover !
Então no caso temos elementos diferentes, por isso a borda duplicada.
analisando melhor o teu css, dessa forma que você implementou você não vai conseguir o efeito.
muito complicado ter que 'retirar e por' bordas..
pq você não trabalhou com uma table ? ai você poderia contar com o border-collapse;
como iria funcionar com border collapse ?
Eu pensei em algo assim:
<style type="text/css">
table {
border-collapse: collapse;
}border: 1px solid #000;
width: 200px;
}border-color: #f00;
}
</style>
<table>
<tbody>
<tr>
<td>Nome</td>
</tr>
<tr>
<td>Nome</td>
</tr>
<tr>
<td>Nome</td>
</tr>
</tbody>
</table>
como assim 'sobrepondo'?
na verdade, oque acontece é uma troca.
sai a default, e entra a do estado :hover no lugar
poste uma imagem do efeito que você deseja.