如何结合CSS：悬停：不

发布于 2025-02-07 08:30:28 字数 516 浏览 1 评论 0原文

已经有一个类似的问题，但是这个问题使用了嵌套元素。我的情况有些不同。当用户徘徊在行上时，我想在菜单项上创建光泽效果，但是如果该行还具有“禁用”类，则不会。

这是我的html，

<tr class='menubaroption disabled'><td>Client</td></tr>

这是我尝试过的变体的CSS

.menubaroptions tr.menubaroption:hover :not(.disabled) td{
   opacity:1;
   text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 20px #fff,0 0 40px #0ff,0 0 80px #0ff
}

，但我似乎无法正常工作。没有：不（.Disabled）所有菜单项都具有悬停效果，但是如果我放入：不（如本示例中），它会从中删除悬停效果禁用类。这里有什么技巧？

原文

There is a similar question already, but that question uses nested elements. My scenario is a bit different. I want to create a glow effect on a menu item when the user hovers over the row, but not if the row also has a "disabled" class.

This is my HTML

<tr class='menubaroption disabled'><td>Client</td></tr>

Here's my css

.menubaroptions tr.menubaroption:hover :not(.disabled) td{
   opacity:1;
   text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 20px #fff,0 0 40px #0ff,0 0 80px #0ff
}

I've tried variations of this but I can't seem to get it to work. Without the :not(.disabled) all menu items have the hover effect, but if I put in the :not (as in this example) it removes the hover effect from all menu items, even those without the disabled class. What's the trick here?

分享到QQ

分享到微博

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

发布评论

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

悍妇囚夫 2025-02-14 08:30:28

您只需要删除两个伪级之间的空间：hover：not

div {
  width: 30px;
  height: 30px;
  background-color: red;
  margin: 10px;
}

div:hover:not(.disabled) {
  background-color: blue;
}

<div></div>
<div class="disabled"></div>

You only need to remove the space between both pseudo-classes :hover :not

div {
  width: 30px;
  height: 30px;
  background-color: red;
  margin: 10px;
}

div:hover:not(.disabled) {
  background-color: blue;
}

<div></div>
<div class="disabled"></div>

回复收藏 0 原文

还在原地等你 2025-02-14 08:30:28

尝试删除以下空间之间的空间：悬停和：不。这样的事情：

.menubaroptions tr.menubaroption:hover:not(.disabled) td {
   opacity:1;
   text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 20px #fff,0 0 40px #0ff,0 0 80px #0ff;
}

Try removing the space between the :hover and :not. So something like this:

.menubaroptions tr.menubaroption:hover:not(.disabled) td {
   opacity:1;
   text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 20px #fff,0 0 40px #0ff,0 0 80px #0ff;
}

回复收藏 0 原文

~没有更多了~