Divs ronds se chevauchant parfaitement

Question

J'ai une liste qui contient des éléments ronds. Ils ont une image en arrière-plan et en vol stationnaire l'autre div est censé devenir visible en superposition. Cela fonctionne jusqu'à présent, cependant il y a toujours une bordure visible, indiquant que le div plané ne recouvre pas parfaitement l'autre élément arrondi.

HTML:

<ul> 
    <li> 
     <div class="hover"></div> 
    </li> 
    <li> 
     <div class="hover"></div> 
    </li> 
    <li> 
     <div class="hover"></div> 
    </li> 
</ul> 

CSS:

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    font-size: 0; 
    height: 140px; 
} 
li { 
    width: 140px; 
    height: 140px; 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
    border-radius: 70px; 
    background: url(http://www.nationalflaggen.de/media/flags/flagge-thailand.gif); 
} 
.hover { 
    border-radius: 70px; 
    width: 140px; 
    height: 140px; 
} 
.hover:hover { 
    background-color: rgba(255,255,255,.9); 
} 

J'ai ajouté un violon depuis que je ne sais vraiment pas comment les faire parfaitement se chevauchent.

Merci pour votre aide.

MISE À JOUR LE VIOLON: http://jsfiddle.net/pL9Aa/1

Answer 1

Vous pouvez ajouter:

li:hover { 
    background:none; 
} 

pour veiller à ce que l'arrière-plan sur le li est parti.

C'est bizarre cependant - ressemble à un bug de rendu.

En supposant que vous ayez du texte ou un autre contenu dans la superposition, il est intéressant de noter que la définition de l'arrière-plan pour être légèrement transparent (par exemple rgba (255,255,255,0.8)) rend l'erreur de rendu moins perceptible.

Answer 2

Cela ressemble à un problème de sous-pixel - le navigateur fait un tas de maths pour déterminer la finesse d'une courbe en utilisant des pixels carrés. Et parfois cela ne rend pas comment vous pourriez vous attendre.

Vous pouvez simplement supprimer la règle border-radius de la pseudo-classe: hover si vous la gardez transparente.

.hover { 
    width: 140px; 
    height: 140px; 
} 

Fiddle

Si elle doit être ronde, je remplacer votre image en utilisant le même élément, au lieu d'un élément imbriqué, comme ceci:

li:hover { 
    background: white; 
} 

Fiddle2

Answer 3

Changez simplement #hover s border-radius: 62px;

Answer 4

Si votre vol stationnaire est uniquement destiné à couvrir l'élément, vous n'avez pas besoin de placer un rayon de bordure sur l'élément stationnaire.supprimant simplement cette ligne résoudra votre problème:

.hover { 
    width: 140px; 
    height: 140px; 
} 

http://jsfiddle.net/pL9Aa/3/

Answer 5

Si dans le envirionment de production que vous pouvez réellement utiliser une couleur d'arrière-plan, vous pouvez également utiliser un box-shadow

Démo: http://jsfiddle.net/j4NFB/

.hover:hover { 
    background-color: #FFF; 
    box-shadow: 0 0 0 1px #fff; 
}