<!DOCTYPE html>
<html>
<body>
<style>
ul li {
margin: 2px; /* Adds 2px of margin around each list item */
}
ul:hover li {
opacity: .5; /* Reduces the opacity to 0.5 when the list is hovered */
}
ul li:hover {
opacity: 1; /* Restores the opacity to 1 when an individual list item is hovered */
}
</style>
<!-- Start of the unordered list -->
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<!-- End of the unordered list -->
</body>
</html>
6条答案
按热度按时间jdgnovmf1#
你的意思是这样的:
http://jsfiddle.net/S4TMS/
超文本标记语言
字符串
CSS
型
7z5jn7bk2#
与使用多个选择器相反,您可以使用
:not
选择器将它们合并合并为一个。字符串
这将在所有
li
上设置opacity:.5
,除了悬停在上面的那个。jsFiddle here
aor9mmx13#
您可以尝试something like this,由于
text-shadow
属性,所有浏览器都不支持something like this:字符串
**编辑:**添加了一个jsfiddle的链接,因为这显然是让你投票的很酷的事情。:P
hiz5n14c4#
字符串
cunj1qz15#
字符串
osh3o9ms6#
在我的CSS实现中,我遇到了一个小问题。(可能包括空白区域的填充或
grid
类型的显示),所有的li
元素都变得模糊。这不是我想要的。我的目标是只有当li
元素悬停时才模糊所有其他的li
元素over,而不是悬停在ul
元素本身上时。为了解决这个问题,我调整了我的CSS如下:
个字符