再帰CSSを防止：ホバー効果

次のCSSとHTMLを考えてみましょう。再帰CSSを防止：ホバー効果

<?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>

結果として、子ノードに関係なくマウスが上がっているすべてのノードにホバー効果が表示されます。

私がロックしている効果は、マウスが直接上にあるノードだけにホバー効果を表示することです。これは、マウスが子ノードの上にあるときに、要素にホバー効果がないことを示しています。

これだけの方法でCSSにはありますか？

私は常にのonmouseoverれるonmouseoutイベントハンドラを使用してCSSクラス.hoverまたは類似を使用して可能性が推測されていない場合。 Butt私は、影響を受けるdomノードを変更せず、CSSで簡単にスタイル可能な解決策を見つけることが望ましいでしょう。あなたが唯一のリーフノードは、黒の背景色を得るために、そしてあなただけのノードのちょうど三つのレベルがあります保証することができますしたい場合は

出典

2011-01-29 LeadingLight

XHTML文書の前に '<？xml version =" 1.0 "encoding =" UTF-8 "？>'何がありますか？ – mauris

@thephpdeveloper：XHTML 1.0/1.1文書は 'application/xhtml + xml'はXML宣言の検証が必要です。しかし、それらを 'text/html'として提供すれば、XML宣言は必要ありません。それ以外の場合は、IE（少なくとも私はIE6と思われます）をquirksモードにすることをお勧めします。 – BoltClock

、あなたはこれを行うことができます。

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

は、そうでない場合はJavaScriptを使用する必要がありますリーフノードとその親ノードの背景色を設定します。

ここで働くのjQueryを使って何か：私はdiv:hover < divのように、あなたがホバー要素の親ノードを選択する必要があるため、これは、CSSでは不可能だと思い

$('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

出典

2011-01-29 13:34:03 BoltClock

ああ、私はjsFiddleが好きです。はい、jQueryのものが目的の効果を達成します。しかし、CSSでどのような効果を出すかは、スタイルを決めるためには必要ありません。私は直接スタイルの代わりにノードにクラスを設定することでこれを行うことができますが、それは避けたいノードを変更することを意味します。 – LeadingLight

@LeadingLight：残念ながら、唯一の選択肢は、jQueryを使ってスタイルやクラスを適用することです。 HTMLは、CSSのスタイルやJavaScriptの特質であるスタイルや動作ではなく、構造のみを定義します。 – BoltClock

が、そこCSSの親セレクタ<はありません。

JavaScriptイベントでは簡単です。

出典

2011-01-29 13:48:41 Floern

再帰CSSを防止：ホバー効果

答えて

関連する問題