Hover effects on class and id tied to each other? - html

Question

I'm working on a custom navbar on a site I'm making but I've run into an issue. I've searched around and have found some similar threads, but nothing that has worked for me. I have a navbar with an image and some text underneath. What I'm trying to accomplish is while hovering over either the text or image, the hover effect for both occurs. The issue is that for the image, the hover effect is done thru an ID and the text hover effect is done thru a class. Here is my markup for one of the sets.
<div class="col-md-2 col-sm-1">
<a href="#Url.Action("Index","Home")" title="HOME" style="margin-left:10px;">
<div id="homenav"></div>
<div class="navtext">HOME</div>
</a>
</div>
And here is the CSS for the image:
#homenav {
margin: 0 auto;
display: block;
width: 47px;
height: 50px;
background: url('../Images/NAV_ICONS/NAV_HOME.png') no-repeat 0 0;
}
#homenav:hover {
background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}
And the CSS for the text:
.navtext{
font-family: RobotoCondensed-Bold, 'Arial Narrow', Arial, sans-serif;
color: #00457c;
overflow: hidden;
white-space: nowrap;
}
.navtext:hover{
color: #ee2e24;
}
And just for clarity, I'm simply trying to make both turn the same color red. Any advice will be greatly appreciated.

Answer 1

Could this fit your needs ?
Put both div (#navbar and .navtext) inside a wrapper div, then put your hover styles in those selectors:
#wrapper:hover #homenav
and
#wrapper:hover .navtex
See fiddle here.
But the hover styles come for a hover over the whole wrapper div.

Answer 2

When using css :hover, the property changes will only affect the element being hovered. You would have to use Javascript/JQuery to do this, but it's pretty straightforward.
First, we need to change the :hover css elements into classes like so
.navtextHover{
color: #ee2e24 !important;
}
.homeNavHover {
background: url('http://lorempixel.com/g/400/200/') no-repeat 0 0 !important;
}
We also need to add a new class. This class will essentially mean that they are all tied together when hovered - ie, when one is hovered, all will be treated as hovered. So add that to the HTML (I called it syncedHover)
<div class="col-md-2 col-sm-1">
<a href="#" title="HOME" style="margin-left:10px;">
<div id="homenav" class="syncedHover"></div>
<div class="navtext syncedHover">HOME</div>
</a>
</div>
Then the javascript merely adds the classes on hover and removes them on exit
$(".syncedHover").hover(
function () {
$("#homenav").addClass("homeNavHover");
$(".navtext").addClass("navtextHover");
},
function () {
$("#homenav").removeClass("homeNavHover");
$(".navtext").removeClass("navtextHover");
}
);
This could be written better by passing data to the JQuery method on hover so you don't have a list of addClass methods, but this isn't too cumbersome for only two elements.
This JSFiddle shows a working example with how it can be done https://jsfiddle.net/bou7mqk3/1/

Answer 3

You just need to put a class on the link instead. As in, the parent a tag that the two elements are nested inside.
In this HTML the only change is the additional class on the link - 'your-class', and I removed the unnecessary syncedHover classes:
<div class="col-md-2 col-sm-1">
<a href="#" title="HOME" style="margin-left:10px;" class="your-class">
<div id="homenav"></div>
<div class="navtext">HOME</div>
</a>
</div>
And then update your CSS to this:
.your-class:hover #homenav{
background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}
.your-class:hover .navtext{
color: #ee2e24;
}
No JavaScript needed at all!