CODEWITHSUNDEEP
css
Yonatan
Yonatan

Reputation: 47

Changing :after background color when :before is hover

How can I change the :after part when the :before part is on hover?

image explaining is here: http://www.reshop.co.il/fisha/tab.jpg

Need to change the small triangle when the large square is hover this two part are separated the square had :before and triangle has :After

I had a stupid mistake thanks for helping

Upvotes: 1

Views: 2062

Answers (2)

BoltClock
BoltClock

Reputation: 723448

Whatever the :before portion may be (you haven't shown us any code and that image does nothing to explain your markup), you cannot target just that pseudo-element for the purposes of :hover. :hover and other pseudo-classes can only apply to entire elements, not their pseudo-elements.

You'll have better luck repurposing the :before and :after pseudo-elements as actual elements that are children of your parent element, then using :hover and a sibling selector to target them accordingly, like so:

<div class="parent">
  <span class="before">:before</span>
  Content
  <span class="after">:after</span>
</div>

.parent > .before:hover ~ .after {
    color: red;
}

Upvotes: 3

Olly Hodgson
Olly Hodgson

Reputation: 15775

It's hard to tell exactly what you want without seeing the code, but this should get you closer:

div:hover {
    // These styles affect the div when hovered.
}
div:hover:before {
    // These affect the div's :before when the div is hovered
}
div:hover:after {
    // These affect the div's :after when the div is hovered
}

Upvotes: 3

Related Questions