防止遞歸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或相似。但我最好找到一個解決方案，不要改變受影響的dom節點，這很容易用CSS進行設計。

來源

2011-01-29 LeadingLight

我很好奇：什麼是「<？xml version =」1.0「encoding =」UTF-8「？>在XHTML文檔的前面 – mauris 2011-01-29 13:34:03

@thephpdeveloper：XHTML 1.0/1.1文檔作爲application/xhtml + xml`需要驗證XML聲明。但是，如果您將它們作爲「text/html」提供，則不需要XML聲明。最好不要離開它，否則IE（至少我認爲IE6）會進入怪癖模式。 – BoltClock 2011-01-29 13:34:41

如果只想葉節點，以獲得一個黑色的背景顏色，可以確保只會有節點恰好三個級別，你可以這樣做：

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

否則，您必須使用JavaScript設置葉節點及其父節點的背景顏色。

下面是使用jQuery的一些作品：

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

我想這是不可能的CSS，因爲你必須選擇懸停元素的父節點，如div:hover < div，但有在CSS中沒有父選擇器<。

但是使用JavaScript事件很容易。

來源

2011-01-29 13:48:41 Floern

防止遞歸CSS：懸停效果

回答

相關問題