jQuery 在悬停时调暗或更改其他列表项

发布于 2024-12-05 02:52:46 字数 565 浏览 0 评论 0原文

我怎样才能在悬停时改变颜色，同时将其余部分调暗为不同的颜色和/或不透明度。

一个简单的三个列表项包含在其无序列表中。

这些列表项在悬停时会改变颜色。

代码：

.right-side .headlines li a,.right-side .headlines li{font-size:36px;color:#999}
.right-side .headlines li a:hover{color:#0976ca}

<ul class="headlines">
    <li>
        <a href="#">Headline 1</a>
    </li>
    <li>
        <a href="#">Headline 2</a>
    </li>
    <li>
        <a href="#">Headline 3</a>
    </li>           
</ul>

谢谢大家

原文

How could I go about changing color on hover and at the same time dim the rest to a different color and/or opacity.

A simple three list items enclosed within it's unordered list.

These list items change color on hover.

Code:

.right-side .headlines li a,.right-side .headlines li{font-size:36px;color:#999}
.right-side .headlines li a:hover{color:#0976ca}

<ul class="headlines">
    <li>
        <a href="#">Headline 1</a>
    </li>
    <li>
        <a href="#">Headline 2</a>
    </li>
    <li>
        <a href="#">Headline 3</a>
    </li>           
</ul>

Thanks Guys

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

咿呀咿呀哟 2024-12-12 02:52:46

jsFiddle 示例

CSS：

.headlines a{
    font-size:36px;
    color:#999;
    transition: all 0.5s;
}
.headlines:hover a{            /* PARENT HOVER */
    opacity:0.4;               /* Dim all */
}    
.headlines       a:hover{      /* SINGLE HOVER */
    opacity: 1;                /* Max one */
    color:#0976ca;
}

jsFiddle example

CSS:

.headlines a{
    font-size:36px;
    color:#999;
    transition: all 0.5s;
}
.headlines:hover a{            /* PARENT HOVER */
    opacity:0.4;               /* Dim all */
}    
.headlines       a:hover{      /* SINGLE HOVER */
    opacity: 1;                /* Max one */
    color:#0976ca;
}

回复收藏 0 原文

~没有更多了~