Empêcher CSS récursif: effet de survol

Considérez les css et html suivants.Empêcher CSS récursif: effet de survol

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Hover Test</title> 
    <style> 
     div { 
      min-height: 20px; 
      margin:20px; 
      border: 1px solid #000; 
      background-color: #fff; 
     } 
     div:hover { 
      background-color: #000; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <div> 
      <div></div> 
      <div></div> 
     </div> 
     <div> 
      <div></div> 
      <div></div> 
     </div> 
    </div> 
    <div> 
     <div> 
      <div></div> 
      <div></div> 
     </div> 
     <div> 
      <div></div> 
      <div></div> 
     </div> 
    </div> 
</body> 
</html>

L'effet résultant est qu'il montre l'effet de survol sur tous les nœuds de la souris, indépendamment des nœuds enfants.

L'effet pour lequel je me bloque est de montrer l'effet de survol sur seulement les nœuds directement sur la souris. Cela ne montre pas l'effet de survol sur un élément lorsque la souris est sur un nœud enfant.

Existe-t-il un moyen de le faire seul dans CSS?

Sinon je suppose que je pourrais toujours utiliser onmouseover un onmouseout gestionnaires d'événements et en utilisant un .hover de classe ou similaire css. Butt je trouverais de préférence une solution qui ne mute pas le nœud dom affecté et qui est facilement styleable avec CSS.

Source

2011-01-29 LeadingLight

Je suis curieux: qu'est-ce que '' Devant un document XHTML – mauris

@thephpdeveloper: documents XHTML 1.0/1.1 servis comme application/xhtml + xml' nécessite la validation de la déclaration XML. Cependant, si vous les utilisez en tant que 'text/html', la déclaration XML n'est pas nécessaire. Il est préférable de le laisser à l'écart sinon IE (au moins je pense que IE6) ira en mode bizarreries. – BoltClock

Si vous ne voulez que les nœuds feuilles d'acquérir une couleur de fond noir, et vous pouvez vous assurer qu'il y aura seulement exactement trois niveaux de nœuds, vous pouvez le faire:

div > div > div:hover { 
    background-color: #000; 
}

Sinon, vous devez utiliser JavaScript pour définir les couleurs d'arrière-plan des nœuds feuilles et de leurs nœuds parents.

est ici quelque chose en utilisant jQuery qui fonctionne:

$('div').hover(function() { 
    $(this).css('background-color', '#000'); 
    $(this).parents('div').css('background-color', '#fff'); 
}, function() { 
    $(this).css('background-color', '#fff'); 
    $(this).parent('div').css('background-color', '#000'); 
});

Preview on jsFiddle

Source

2011-01-29 13:34:03 BoltClock

Ohh j'aime jsFiddle. Oui, la chose jQuery atteint l'effet désiré. Mais j'ai besoin de savoir quel type d'effet se produira avec CSS. Je pourrais le faire en plaçant des classes sur des noeuds au lieu des styles directs, mais cela signifie qu'il mutera le noeud que je voudrais vraiment éviter. – LeadingLight

@LeadingLight: Malheureusement, vos seules options sont d'utiliser jQuery pour appliquer les styles ou utiliser des classes. HTML ne définit que la structure, et non le style ou le comportement qui sont respectivement les spécialités CSS et JavaScript. – BoltClock

Je suppose que cela est impossible avec CSS, parce que vous devez sélectionner le nœud parent de l'élément plané, comme div:hover < div, mais il est aucun sélecteur parent < en CSS.

Mais c'est facile avec les événements JavaScript.

Source

2011-01-29 13:48:41 Floern

Empêcher CSS récursif: effet de survol

Répondre

Questions connexes