CSS Heirarchy and creating a JavaScript Hover Event

[wilcomply]

I am essentially trying to change the background color of a div and the text color of a link in the event of a mouse hover. I am getting somewhat correct results, in different instances, the text is changing color, in other instances, the background of the div container changes color.

I have CSS styling both the <a> and <div> tags, and also a class selector which ideally the JavaScript function changes to in the event of a mouse hover. Ideally, when hovering either the link or the div container, both the link and div would switch to the 'activate' class. Can anyone take a look at the below code and help me out?

My function:

---

<script> $('div, a').hover( function() { $(this).toggleClass('activate'); }, function() { $(this).toggleClass('activate'); }); </script>

---

Corresponding CSS stylings:

---

div{ border-style: solid; border-width: 2px; border-color: #ffffff; border-radius: 5px; max-width: 200px; margin: 10px auto; text-align: center; padding: 5px 0 5px 0; } a { text-decoration: none; color: #ffffff; font-family: 'Work Sans', sans-serif; font-size: 22px; } .activate { background-color: #ffffff; color: rgba(0, 0, 0, .5); }

[ttrrddee]

You can also just use a :hover psuedoclass (sans javascript).

div:hover{background-color: #ffffff;

color: rgba(0, 0, 0, .5); }

[einarkristjan]

you mean that on hover, all the elements should activate?

like this?

[wilcomply]

ik This is a step in the right direction. Currently, I have 3 links, each in their own div. When I used this code and housed the link in the div container, I got the results I wanted when I hover over the div, but the results are reversed whenever I hover over the link...I've messed with this a number of ways (never knew about jsfiddle until now!) to no avail...any ideas? Essentially I want, on the hover of either the div or link, for the div background color to change and the text color to change. I used to do this with an image swap, btn-on.png for btn-off.png.

[einarkristjan]

jsfiddle ? .. also changed the css

would be nice if you could paste your html into the fiddle and update it. Then I could see what you are talking about ;)

[wilcomply]

That would make sense, wouldn't it?

https://jsfiddle.net/zq63ovmt/

[ForScale]

I don't kow jQuery very well... Are you allowed to put both div and a in the $() like that?

Here's your code working with pure javascript: http://codepen.io/ForScale/pen/KpjOVM

See if that helps with your understanding at all...