CSS :hover ne fonctionne pas

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <style type='text/css'>
            #body{
                margin:0px;
            }


            #headerDiv{

                background-color:#e0e2eb;
            }
            .header_innerHeaderDivs{
                border:solid 1px gray;
                display:inline;
                font:normal 11px tahoma;
                color:black;
            }
            .header_innerHeaderDivs:hover{
                padding:4px;
            }
        </style>
    </head>
    <body id='body'>
        <div id='headerDiv'>
            <div class='header_innerHeaderDivs'>Comapny</div>
            <div class='header_innerHeaderDivs'>Edit</div>
            <div class='header_innerHeaderDivs'>Inventory</div>
            <div class='header_innerHeaderDivs'>Logout</div>
        </div>
    </body>
</html>

À L'Aide De FireFox 3.6.3

Je pense que le fait d'avoir ces div à l'ensemble de inline peut être à l'origine de tout un comportement indésirable. Mais je ne peux pas dire pour sûr, car vous n'avez pas indiqué une question ou fourni aucune information en plus de votre code.
D_N: le :hover n'a pas d'effet dans (au moins) de Firefox. Scott: j'ai essayé de supprimer le display: inline, et qui n'a rien changé. Il semble que c'est un problème avec le sélecteur.

InformationsquelleAutor Babiker | 2010-05-28

3

si c'est une barre de navigation, il est préférable d'utiliser une liste de liens(son plus sémantique de cette façon) afin que votre hover fonctionne aussi dans ie( :hover ne fonctionne que pour un des éléments dans ie)
```
<ul id='header-nav'>
  <li><a>Comapny</a></li>
  <li><a>Edit</a></li>
  <li><a>Inventory</a></li>
  <li><a>Logout</a></li>
</ul>
```
puis
```
#header-nav {
  background-color:#e0e2eb;
}

#header-nav a {
  border:solid 1px gray;
  display:inline;
  font:normal 11px tahoma;
  color:black;
}

#header-nav a:hover {
  padding: 4px.
}
```
également un conseil: essayez de s'abstenir de l'utilisation de "div" en tant que partie d'un nom de classe. il n'est pas utile/descriptif de la sémantique 🙂
- J'ai trouvé le mot "sémantique" déroutant pour un temps très long, même quand j'ai regardé la définition. Pourquoi ne peut-on pas utiliser le mot "étiquetage", "nommage des classes", ou quelque chose de similaire?
InformationsquelleAutor corroded
4

Vous pourriez essayer:

#headerDiv div:hover{padding:4px;}

EDIT:

Si vous voulez que le div parent pour développer ensemble l'affichage des .header_innerHeaderDivs de inline-block.
Aussi, comme mentionné ci-dessus, vous pouvez définir votre déclaration de dtd pour:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ou le html4.01 transitional de la variante.
- Cela fonctionne, mais au lieu de s'élargir #headerDiv ainsi que le rembourrage, il l'étend à l'intérieur de la vrd seulement comme s'ils avaient un z-index supérieur.
- Je pense que inline-block ne fonctionne pas dans IE. Peut-être erroné.
- Je pense que vous avez raison. Bien IE6 et IE7 de toute façon. Je pense que IE8 va l'appuyer.
InformationsquelleAutor edl
1

J'ai eu ce problème aussi. Il semble que tout l'intérieur de la div changements dans :hover mais pas le div lui-même. Vous pouvez donc avoir un contour div qui affecte la :hover.
```
<div class="hoverChange"><div class='header_innerHeaderDivs'>Comapny</div></div>
```
Et puis le css
```
.hoverChange :hover{
    padding: 4px;
}
```
InformationsquelleAutor edo4hy
0

Si vous passez le doctype XHTML transitional ou au-dessus de cela fonctionne. IL peut également travailler avec HTML strict ainsi si je n'ai pas essayer. Comme un général ruel si vous souhaitez utiliser a des balises pour l'plane, sauf si vous êtes dicter l'action par l'intermédiaire d'un js même gestionnaire.

InformationsquelleAutor prodigitalson
0

Fonctionne dans Safari. Êtes-vous tester sous IE, où :hover ne fonctionne que sur a éléments?

EDIT: je l'ai testé dans Firefox, et ça ne fonctionne pas là-bas (fonctionne à l'Opéra, tout de même). À l'aide de div.header_innerHeaderDivs fixe... Peut-être que vous ne pouvez pas utiliser de pseudo-sélecteurs sur les classes? Il est valable de bien; peut-être un bug lié au navigateur.

InformationsquelleAutor crimson_penguin
0

Si vous utilisez IE, alors vous aurez besoin d'ajouter <!DOCTYPE html> vers le haut. Sinon, c'est à dire est extra pointilleux et ne reconnaît :hover sur les balises d'ancrage.

EDIT:
Non-CSS alternative (à l'aide de jQuery .bind):
```
    <script> 
      $('.header_innerHeaderDivs').bind('mouseenter', 
        function(event){ 
           $(event.target).css('background-color', 'yellow');
      });
      $('.header_innerHeaderDivs').bind('mouseleave', 
        function(event){ 
           $(event.target).css('background-color', 'blue');
      });
     </script>
```
Je ne voudrais pas le mettre dans une balise script dans le milieu de votre fichier html comme dans le bloc de code (mieux dans un fichier js), mais vous obtenez l'idée. Je préfère l'utiliser pur CSS moi-même, mais c'est une option.

InformationsquelleAutor nurdyguy

Vous devez vous connecter pour publier un commentaire.