本文探讨了如何使用CSS和JavaScript来精确控制元素的悬停效果。通过CSS伪类`:hover`实现背景颜色和字体加粗的变化，然后使用JavaScript的`event.stopPropagation()`阻止事件冒泡，实现对特定子元素悬停样式的独立控制。示例代码展示了如何在鼠标悬停时添加和移除类，从而改变元素的样式。
小编典典
我相信使用CSS可以得到的最接近的结果是从悬浮元素的子元素中删除悬浮样式…这对父母没有帮助。
li:hover {
background-color: lightgray;
}
li:hover {
font-weight: bold;
}
li:hover ul {
background-color: white;
font-weight: normal;
}
- fnord
- baz
- foo
- baz
- foo
- gnarf
- baz
- foo
- baz
- foo
对于您发现的重复项，可接受的答案是用JavaScript做到这一点的最佳方式，方法是e.stopPropagation：使用CSS级联
-hover效。不过，您将要比该选择器中的“ all lis”更具体：$('li').mouseover(function(e)
{
e.stopPropagation();
$(this).addClass('currentHover');
});
$('li').mouseout(function()
{
$(this).removeClass('currentHover');
});
.currentHover {
background-color: red;
}
li.currentHover ul {
background-color: white;
}
- fnord
- baz
- foo
- baz
- foo
- gnarf
- baz
- foo
- baz
- foo
2020-05-16
扫一扫
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
