Can I target this element on hover using CSS only?

Question

I have an i tag which I'd like to style when hovering a button tag. This is my structure:

<a class="container">
  <form>
    <button class="origin">HOVER</button>
  </form>
  <p>
    <i class="destination">TARGET</i>
    <p>
</a>

Is this possible with CSS only? (I know how to do it with JS/jQuery)

I guess I'm looking to target the cousing element here, lol...

To be more specific, I'm looking to make the TARGET text color green when hovering the button:

<style>
    a.container{ border: 1px solid black; display: block; }
    a.container:hover{border-color: red; }
    a.container:hover p i{color: yellow; }
    a form button:hover{ color: red; }
    a form button:hover p i{ color: green; } /* not working... */
    .origin:hover .destination{ color: green; } /* not working... */
</style>
<a class="container">
  <form>
    <button class="origin">HOVER</button>
  </form>
  <p>
    <i class="destination">TARGET</i>
    <p>
</a>

I think I found my answer... no! stackoverflow.com/questions/6930007/… — oliver_siegel
– oliver_siegel, Commented Jul 29, 2018 at 6:11

HorusKol · Accepted Answer · 2018-07-29 23:31:13Z

3

If you only want a hover effect when you mouseover the button, then css pointer-events can do this:

.container {
    pointer-events: none;
}

.container .origin {
    pointer-events: auto;
}

.container:hover .destination {
    color: #00cc00;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

However, since you want one hover effect when mouse over the container, and then a different one when you mouse over the button, then you're going to need to use javascript.

If you're looking for a vanilla javascript script, I've created a fiddle https://jsfiddle.net/j6hs5fmL/40/

edited Jul 29, 2018 at 23:31

answered Jul 29, 2018 at 6:20

HorusKol

8,73610 gold badges58 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

oliver_siegel Over a year ago

wait, this is really good! But I don't quite get it... I modified my question to make it more specific. Would appreciate if you can update your fiddle, if this is a solution! :)

oliver_siegel Over a year ago

Oh, so I think you are disabling the default hover on the container to make it work. I want to have the hover on the container work AND the hover on the origin work, separately. Hovering container causes TARGET to be yellow, hovering origin causes TARGET to be green. Hovering over container and over origin can still cause each of them to change their own style...

HorusKol Over a year ago

Yeah, that kind of behavior is beyond pure css, sorry. I'll try and come back in the morning with a js solution without jquery

לבני מלכה · Accepted Answer · 2018-07-29 06:21:12Z

2

You have to use jquery/js for this....

Use onmouseover and onmouseout and addClass/removeClass in css style the class

function func(){
  $(".destination").addClass("hovering");
}
function outer(){
 $(".destination").removeClass("hovering");
}

.hovering{
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="container">
  <form>
    <button class="origin" onmouseover="func()" onmouseout="outer()">HOVER</button>
  </form>
  <p>
    <i class="destination">TARGET</i>
    <p>
</a>

answered Jul 29, 2018 at 6:21

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

3 Comments

לבני מלכה Over a year ago

yes I see nice solution and I upvoted for this I stay this answer to other OP that prefer this solution

oliver_siegel Over a year ago

I was actually looking for a CSS only solution :-(

HorusKol Over a year ago

Following clarification from the OP, this falls back into requiring a js solution.

Collectives™ on Stack Overflow

Can I target this element on hover using CSS only?

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related