Donc, ma compréhension, qui est démontrée par le code ci-dessous, est que: hover est vrai pour un élément de bloc si la souris se trouve sur la zone définie pour l'élément, ou sur l'un de ses contenus ou enfants débordés. Notez que le div .outer devient bleu même s'il ne se trouve pas sur le contenu du texte, en particulier.
Je n'ai pas encore réussi à isoler un petit cas de test d'une page extrêmement complexe, ce qui démontre que dans certains Dans certains cas, l'effet: hover ne se produit que pour le contenu, et les zones vides de l'élément ne provoquent pas l'activation de: hover.
Cela se produit dans Firefox et Chrome. Ma question est donc la suivante: pour quelle (s) fonctionnalité (s) les régions vides d'un div sont-elles ignorées: effets de survol? Je n'ai pas trouvé de référence dans les documents css à de telles interactions, ni en commençant par la description de la fonctionnalité: hover, ni par toute autre référence que je peux trouver à: hover.
Et l'autre question serait , s'il y a une (des) fonctionnalité (s) qui cause un tel comportement, serait-elle conforme à la norme, ou un bogue dans les navigateurs?
<div> Just some uninvolved stuff </div><div class=outer> <p class=inner>item 1</p> <p class=inner>longer item 2</p> </div> <div> <p> Just some more uninvolved stuff </p> </div>
.outer:hover { background: blue; }
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
3 Réponses :
Si je comprends bien, vous voulez la même zone d'arrière-plan bleu en survol mais uniquement en survolant le texte "élément 1". Pour cela, j'utiliserais un pseudo élément pour créer la couleur d'arrière-plan. Une modification mineure nécessaire au HTML, ajoutez une nouvelle classe unique à l'élément "hover trigger element:
.trigger:hover:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-color: blue;
z-index: 0;
}
Puis supprimez la règle pour .outer: hover et ajoutez position: relative code> au div .outer qui servira de bornes du pseudo élément de fond bleu, nous ajouterons:
.outer {
// ...pre-existing CSS for .outer
position: relative;
}
Vous pouvez maintenant avoir un pseudo élément positionné de manière absolue avec le bleu arrière-plan, uniquement au survol de l'élément "item 1":
<p class="inner trigger">item 1</p>
Eh bien, ou le texte "plus long élément 2" ... ou tout contenu. C'est une combinaison intéressante d'idées ... mais je ne vois pas de code comme ça dans le cas complexe que j'ai mentionné (la plupart de la complexité ne semble pas non plus avoir à voir avec le survol: j'ai ajouté un: hover au complexe page, et a été surpris lorsque le survol des zones vides n'a pas produit l'effet: hover.
L'ajout de survol à des conteneurs entiers n'est pas si courant dans un cas d'utilisation en dehors d'un affichage "cartes" ou quelque chose du genre. Faites attention à quel élément vous ajoutez une règle css : hover .
Oui merci. Je viens de comprendre le problème dans le cas complexe ... bien que le contenu semble être le contenu de la div externe, tout était débordé: la div externe n'avait pas de hauteur! Une fois que je lui ai donné une hauteur, il a résolu le problème: hover.
<div>
Just some uninvolved stuff
</div>
<div class="outer">
<p><span>item 1</span></p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>
.outer:hover {
cursor:crosshair;
}
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
Ce qu'il faut retenir, c'est qu'en ce qui concerne les pages CSS et HTML, il existe un concept de modèle de boîte:
Le modèle de boîte CSS décrit les boîtes rectangulaires qui sont générées pour les éléments de l'arborescence du document et disposés selon le visuel modèle de formatage.
En savoir plus ici
Donc, si vous souhaitez simplement que l'arrière-plan soit bleu sur un texte spécifique, vous pouvez cibler ce texte avec SPAN, puis attribuez une classe, par exemple en combinant la pseudo classe de survol avec .content , la classe de la paire de balises SPAN enveloppant "item 1". Notez que j'ai pris la liberté d'ajouter d'autres choses à l'événement de survol, comme changer également la couleur du texte et ajouter un peu de remplissage.
Si vous voulez survoler le div contenant le contenu du texte et que seuls l'arrière-plan du contenu du texte et éventuellement les couleurs du texte changent, vous pouvez utiliser JavaScript pour programmer ces modifications, comme suit:
var divs = document.getElementsByTagName("div");
var spans = document.getElementsByTagName("span");
divs[1].onmouseover = function() {
spans[0].style.backgroundColor = '#00c';
spans[0].style.color = '#ccf';
};
divs[1].onmouseout = function() {
spans[0].style.backgroundColor = '#fff';
spans[0].style.color = '#000';
};
<div> Just some uninvolved stuff </div><div class=outer> <p><span class="content">item 1</span></p> <p class=inner>longer item 2</p> </div> <div> <p> Just some more uninvolved stuff </p> </div>
.content:hover {
background: #00c;
color: #cff;
cursor: default;
padding:0.2em;
}
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
Je pense que la question est lorsque vous survolez la couleur d'arrière-plan du parent div doit couvrir uniquement la zone enfant et non l'espace blanc.
@AmarjitSingh Vous avez peut-être raison, j'ai donc révisé ma réponse en ajoutant une autre solution utilisant HTML, CSS et JavaScript.
Merci pour votre contribution. Techniques intéressantes ici. Tant de choses à apprendre! @AmarjitSingh a résolu le problème.
@victoria Je suis venu à une solution, s'il n'y a pas de hauteur, donnez p float: left; clear: both; et le survol à l'extérieur devraient rendre la couleur du paragraphe bleue qui supprimera le survol des espaces blancs.
J'espère que cela vous aidera!
<div> Just some uninvolved stuff </div><div class=outer> <p class=inner>item 1</p> <p class=inner>longer item 2</p> </div> <div> <p> Just some more uninvolved stuff </p> </div>
.outer p{ float: left; clear:both;}
.outer:hover p{ background: blue; }
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
Merci! Vous avez résolu le problème. C'était en fait ainsi que la page complexe n'avait pas de survol: pas de hauteur sur la boîte extérieure ... mais il y avait suffisamment de position de taille égale: des superpositions absolues dans cette page pour qu'elle ressemblait à une boîte, donc j'étais complètement confus, jusqu'à il y a quelques instants. J'aurais aimé voir / lire votre réponse au moment où elle est venue, j'aurais sauvé une autre heure de coups de tête!
Bienvenue @Victoria :) Tout type de html / css, la conception que vous pouvez compter sur moi, je suis juste un message.
Oh, et pour être complet, la réponse à la deuxième question est oui, elle est conforme à la norme, car tout le contenu est du contenu débordé.