Javascript 防止递归CSS：悬停效果_Javascript_Html_Css

Javascript 防止递归CSS：悬停效果

javascript html css

Javascript 防止递归CSS：悬停效果,javascript,html,css,Javascript,Html,Css,考虑以下css和html <?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"> &l

考虑以下css和html

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


悬停试验
div{
最小高度：20px；
利润率：20px；
边框：1px实心#000；
背景色：#fff；
}
div:悬停{
背景色：#000；
}

结果是，无论子节点如何，鼠标悬停在所有节点上都会显示悬停效果

我锁定的效果是仅在鼠标直接位于其上的节点上显示悬停效果。当鼠标悬停在子节点上时，不会在元素上显示悬停效果

有没有一种方法可以单独在CSS中实现这一点

如果没有，我想我可以使用onmouseover和onmouseout事件处理程序，并使用css类.hover或类似的方法。但是我最好能找到一种解决方案，它不改变受影响的dom节点，并且可以很容易地使用CSS进行样式设置。

如果您只希望叶节点获得黑色背景色，并且可以确保只有三个级别的节点，您可以这样做：

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');
});

我想这在CSS中是不可能的，因为您必须选择悬停元素的父节点，比如

div:hover

，但是没有父选择器我很好奇：XHTML前面的
是怎么回事document@thephpdeveloper：用作应用程序/XHTML+xml
的XHTML 1.0/1.1文档需要验证xml声明。但是，如果将它们作为text/html
提供，则不需要XML声明。最好不要使用它，否则IE（至少我认为IE6）会进入怪癖模式。是的，jQuery实现了预期的效果。但是我需要对CSS产生什么样的效果进行设计。我可以通过在节点上设置类而不是直接样式来实现这一点，但这意味着它将改变我非常希望避免的节点。@LeadingLight：不幸的是，您唯一的选择是使用jQuery应用样式或使用类。HTML只定义结构，而不是样式或行为，这是CSS和JavaScript各自的特点。