How to combine css :hover with :not

Question

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?

Remember that space has meaning in such CSS selectors. – A Haworth Jun 14 '22 at 18:15 — A Haworth, Jun 14 '22 at 18:15

score 3 · Answer 1 · answered Jun 14 '22 at 17:16

3

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>

answered Jun 14 '22 at 17:16

Toni Bardina Comas

1,670
1
5
15

This may have worked at one point, but no longer does. When you run the code snippet, both divs are red. – SimonHawesome Apr 14 '23 at 21:23

score 2 · Accepted Answer · answered Jun 14 '22 at 17:17

2

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;
}

answered Jun 14 '22 at 17:17

Supreet T

91
1
4

How to combine css :hover with :not

2 Answers2