Exclude class under <a> tag from a:hover

user_14819955 0
Viewed 74

I have selectable boxes (class="selectbox") with their own hover behaviour, so any link text within these boxes should be excluded from the general a:hover effect. I tried to use the :not() CSS pseudo-class as suggested in other answers on SO but can't get it to work.

<!-- Link within box, should not have hover effect -->
<a href="XXX">
  <div class="selectbox">
    <article class="media">
      <div>
        <p>
        Link within box
        </p>
      </div>
    </article>
  </div>
</a>

<!-- General link, should have hover effect -->
<a href="XXX">General link</a>

CSS I have tried:

a:not(.selectbox):hover {
    text-shadow: 1px 0 0 currentColor;
}

a:not(a > .selectbox):hover {
    text-shadow: 1px 0 0 currentColor;
}
css html
2 Answers

:not wouldn't work here since you wanna know wether it contains some element or not. You could use :has like below but the support accros browsers isn't the best.

a:hover {
    text-shadow: 1px 0 0 currentColor;
}
a:has(.selectbox):hover{
  text-shadow: none;
}
<a href="XXX">
  <div class="selectbox">
    <article class="media">
      <div>
        <p>
        Link within box
        </p>
      </div>
    </article>
  </div>
</a>

<!-- General link, should have hover effect -->
<a href="XXX">General link</a>

Or use a selector with higher specificity for what's within the anchor, like so:

a:hover {
    text-shadow: 1px 0 0 currentColor;
}
a > .selectbox {
    text-shadow: none;
}
<a href="XXX">
  <div class="selectbox">
    <article class="media">
      <div>
        <p>
        Link within box
        </p>
      </div>
    </article>
  </div>
</a>

<!-- General link, should have hover effect -->
<a href="XXX">General link</a>

user_152886410

i tried to use :not()

     a {
            display: block;
            color: green;
        }
        a:not(.child):hover {
            font-size: 1.5em;
        }
 <a href="XXX" class="parent">General link
        <a class=" child" href="XXX">
            <div class="selectbox">
                <article class="media">
                    <div>
                        <p>
                            Link within box
                        </p>
                    </div>
                </article>
            </div>
        </a>
    </a>

user_196183150
Related