Question

考虑以下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>

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

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

单独使用CSS有没有办法解决这个问题？

如果不是，我想我总是可以使用 onmouseover onmouseout 事件处理程序并使用css类.hover或类似的。但我最好找到一个不会改变受影响的dom节点的解决方案，并且可以使用CSS轻松设置样式。

Answer 1

如果您只希望叶子节点获得黑色背景颜色，并且您可以确保只有三个级别的节点，则可以执行此操作：

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

Answer 2

我想这对CSS来说是不可能的，因为你必须选择hovered元素的父节点，比如div:hover < div，但CSS中没有父选择器<。

但是使用JavaScript事件很容易。

防止递归CSS：悬停效果

2 个答案: