css悬停在li上，模糊所有其他

jgwigjjp 于 2023-11-19 发布在其他

关注(0)|答案(6)|浏览(118)

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

字符串
有没有人能告诉我，当用户将鼠标移到包含c的元素上时，是否可以使用css模糊包含a、d、e的ul元素，而不使用JavaScript？

css

来源：https://stackoverflow.com/questions/4145590/css-hover-over-li-blur-all-others

6条答案

按热度按时间

jdgnovmf1#

你的意思是这样的：
http://jsfiddle.net/S4TMS/

超文本标记语言

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

字符串

CSS

ul li {
    background-color: red;
    margin: 2px;
}

ul:hover li {
    opacity: .5;
}

ul li:hover {
    opacity: 1;
}

型

赞(0）回复(0）举报 2023-11-19

7z5jn7bk2#

与使用多个选择器相反，您可以使用:not选择器将它们合并合并为一个。

ul:hover li:not(:hover) {
    opacity: .5;
}

字符串
这将在所有li上设置opacity:.5，除了悬停在上面的那个。
jsFiddle here

赞(0）回复(0）举报 2023-11-19

aor9mmx13#

您可以尝试something like this，由于text-shadow属性，所有浏览器都不支持something like this：

ul:hover li {
    text-shadow: 0px 0px 3px black;
    color: transparent;
}

ul:hover li:hover {
    text-shadow: none;
    color: black;
}

字符串

**编辑：**添加了一个jsfiddle的链接，因为这显然是让你投票的很酷的事情。：P

赞(0）回复(0）举报 2023-11-19

hiz5n14c4#

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

字符串

赞(0）回复(0）举报 2023-11-19

cunj1qz15#

ul:hover li:not(:hover) {
    filter: blur(3px);
}

字符串

赞(0）回复(0）举报 2023-11-19

osh3o9ms6#

在我的CSS实现中，我遇到了一个小问题。（可能包括空白区域的填充或grid类型的显示），所有的li元素都变得模糊。这不是我想要的。我的目标是只有当li元素悬停时才模糊所有其他的li元素over，而不是悬停在ul元素本身上时。
为了解决这个问题，我调整了我的CSS如下：

ul:has(li:hover) li:not(:hover) {
  opacity: 0.5;
}

个字符

赞(0）回复(0）举报 2023-11-19

我来回答

css悬停在li上，模糊所有其他

6条答案

相关问题

热门标签

最新问答