CODEWITHSUNDEEP
htmlcss
Moel
Moel

Reputation: 59

CSS hover on all elements not working as expected

I have tried to add a hover effect to every element in the website but *:hover is not working.

I have tried different html tags, but only some will allow this hover to work, like the a tag in the example

*,
*:before,
*:after {
  box-sizing: border-box;
}

* {
  border: solid .5px #dbdbdb;
}

*:hover {
  border: solid .5px #737373;
}
<div>
  <h1>Example Domain</h1>
  <p>This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.</p>
  <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>

Upvotes: 0

Views: 2216

Answers (1)

BigCore
BigCore

Reputation: 517

The reason your hover is not working is because it is not being applied to the elements that you think it is.

The elements that you are targeting with your CSS are not the ones that are being hovered. This is because the :hover pseudo-class is not inherited; That is, if you apply :hover to an element, it will only affect that element and not any of its child elements.

In your case, you are targeting the * selector, which matches all elements. But, because :hover is not inherited, it is not being applied to the child elements.

To solve this problem, you need to target the child elements directly with your CSS. For example:

a:hover {
  border: solid .5px #737373;
}

This will apply the hover effect to all a elements.

Upvotes: 1

Related Questions