CSS CSS3 有选择地禁用悬停效果

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14178952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:11:27  来源:igfitidea点击:

CSS3 disable hover effect selectively

css

提问by bdx

I have an unnumbered list containing multiple items - some items are 'headings', most items are links.

我有一个包含多个项目的未编号列表 - 有些项目是“标题”,大多数项目是链接。

At present, I have the following CSS for my list:

目前,我的列表中有以下 CSS:

#result-side-menu li:hover {
  background-color: rgba(0,0,0,0.15);
}

I want to be able to disable the hover only on the heading list items while maintaining it on all others. My best (and still unsuccessful) attempt so far was to do this:

我希望能够仅在标题列表项上禁用悬停,同时在所有其他项上保持悬停。到目前为止,我最好的(但仍然没有成功)尝试是这样做的:

#result-side-menu.li-no-hover li:hover {
  background-color: none;
}

and then to apply the class="li-no-hover"to the heading list items.

然后将 应用于class="li-no-hover"标题列表项。

Is there a way of achieving what I'm trying to do?

有没有办法实现我想要做的事情?

回答by 3dgoo

If you apply class="li-no-hover"to your lielements you don't want the hover effect, then this is the css you want:

如果您应用class="li-no-hover"到您li不想要悬停效果的元素,那么这就是您想要的 css:

#result-side-menu li.li-no-hover:hover {
    background-color: transparent;
}

回答by Md Sirajus Salayhin

You can try this:

你可以试试这个:

#result-side-menu li.li-no-hover:hover {
  opacity:1;
}