防止CSS :hover效果的递归

Question

防止CSS :hover效果的递归

3

请考虑以下CSS和HTML代码。

考虑以下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事件处理程序，并使用类.hover或类似的CSS类。但最好找到一种不改变受影响的DOM节点并且易于使用CSS进行样式设置的解决方案。

- LeadingLight

1

我很好奇：在XHTML文档前面的<?xml version="1.0" encoding="UTF-8"?>是什么意思？ - mauris

2

@thephpdeveloper：以application/xhtml+xml格式提供的XHTML 1.0/1.1文档需要XML声明进行验证。但是，如果您将它们作为text/html提供，则不需要XML声明。最好将其省略，否则IE（至少我认为是IE6）将进入怪异模式。 - BoltClock

2个回答

0

我猜这在CSS中不可能实现，因为你必须选择悬停元素的父节点，例如div:hover < div，但是CSS中没有父选择器<。

但是使用JavaScript事件很容易实现。

- Floern

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

如果你只想让叶子节点获得黑色背景颜色，并且你可以确保节点只有三个层级，那么你可以这样做：

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