I want to remove a property from an element, when the user hovers an other element:

<button id="element1" type="button">Element1</button>
<button id="element2" type="button">Element2</button>
<style>
#element1:hover{
 __here I want to remove a property from element2__
}
</style>

CodePudding user response：

There are two parts to your problem.

Selecting the other element

If you want to involve two different elements in your selector (which you need to in order to have both the element you are targeting as well as the element with the pseudo-class :hover) then you need to use a combinator.

The specifics will depend on the relationship between the two elements, and often there is no suitable relationship you can use.

In this case, you can use the adjacent sibling combinator.

#element1:hover   #element2 { ... }

Removing a property

There are a variety of values you could give to the property to give various effects of removal. They have subtle differences so you should compare them in the documentation to determine which suits your needs.

• initial
• revert
• revert-layer

Make sure you check the browser compatibility tables. revert-layer in particular is very new with limited support.