Simple CSS Hover Problème?

Je ne comprends pas pourquoi mon survol en ancre ne fait pas jaunir la boîte div. Voici mon code:Simple CSS Hover Problème?

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
a {background-color:Blue; width:400px; height:200px;} 
#hide { width:500px; height:500px;background-color:black; } 
a:hover #hide {background-color:yellow; } 
</style> 
</head> 
<body> 
<a>hover</a> 
<div id="hide">turn yellow</div> 
</body> 
</html>

Je suis très fatigué en ce moment, donc je dois être méconnais quelque chose de simple

Source

2010-07-27 John

Vous fermez la <a> avant d'introduire hide, de sorte que le chemin

a:hover #hide

sera ne jamais appliquer.

Source

2010-07-27 18:14:59

merci, je pense que je devrais faire une sieste ... trop fatigué – John

a: hover #hide - signifie que vous devez appliquer le style à un enfant contenu dans la balise d'ancrage

Dans le code HTML que vous montrez, la DIV #hide est pas un enfant de la balise d'ancrage

HTH

Source

2010-07-27 18:15:16 Sunny

Je ne pense pas que cela fonctionnera. Je pense que vous aurez à la couleur via javascript:

<a onmouseover="document.getElementById("hide").stylebackgroundcolor='yellow'">hover</a>

Source

2010-07-27 18:16:37 sTodorov

'onclick! = Hover' –

désolé pour l'erreur – sTodorov

Votre code HTML devrait ressembler à ceci pour votre CSS au travail:

<a>hover 
    <div id="hide">turn yellow</div> 
</a>

Mais encore une fois, je crains que ce n'est pas un balisage valide. Pour contourner cela, vous auriez pu enveloppé que dans un autre div:

<div>hover 
    <div id="hide">turn yellow</div> 
</div>

Mais encore si vous avez fait en CSS:

div:hover{.....}

Cela ne fonctionne pas dans IE6 car IE6 supporte :hover sélecteur de pseudo uniquement pour les liens.

Donc, la solution simple si vous souhaitez utiliser un lien (votre structure de balisage):

<a id="link">hover</a> 
<div id="hide">turn yellow</div>

Vous devez utiliser javascript comme ceci:

var el = document.getElementById('link'); 
var dv = document.getElementById('hide'); 

el.onmouseover = function(){  
    dv.style.backgroundColor = 'yellow'; 
}; 

el.onmouseout = function(){ 
    dv.style.backgroundColor = 'blue'; 
};

Source

2010-07-27 18:17:24 Sarfraz

Vous voulez dire ce n'est pas * balise * valide. :) –

@Pekka: C'est vrai, merci pour la terminologie correcte :) – Sarfraz

a:hover #hide {background-color:yellow; }

Cela n'existe pas , vous voulez ceci:

a:hover div#hide

et que vous voulez mettre votre div dans votre ancre si ceci est votre résultat souhaité:

<a>hover 
    <div id="hide">turn yellow</div> 
</a>

Source

2010-07-27 18:19:31 Organiccat

'a: hover # hide' et' a: hover div # hide' est fondamentalement le même sélecteur. –

Dans les navigateurs modernes, cela devrait fonctionner aussi (le sélecteur de frères et soeurs adjacent « + »):

a:hover + #hide {background-color:yellow;}

Mais ce serait plutôt étrange. Les solutions qui mentionnent mettre le div à l'intérieur du a est la forme courante du html. Pour le rendre valide html, cependant, le div doit changer en span et si vous avez besoin des qualités de bloc d'un div, réglez-le sur display: block.

Source

2010-07-27 18:25:02 ScottS

Comme indiqué par les autres affiches, vous pouvez placer le div #hide dans le lien; Cependant, si vous voulez vraiment la div en dehors du lien, vous pouvez utiliser:

a:hover + #hide { background-color:yellow; }

Cela devrait styler l'élément avec id hide qui vient directement après le lien étant plané au-dessus.

Source

2010-07-27 18:26:33 derekerdmann

a:hover #hide cibles un élément avec ID « cacher » à l'intérieur tout un élément, par exemple ceci:

<a href="..."> 
<span id="hide">...</span> 
</a>

Qu'est-ce que vous êtes vraiment après dans votre cas est a:hover + #hide, car cela signifie « l'élément avec id "hide" juste après un élément d'ancrage qui est plané ".

Source

2010-07-27 18:29:07

Simple CSS Hover Problème?

Répondre

Questions connexes