Hello. I be new.

 

Just wondering if there's a simple and fairly clean way of adding a hover effect to a div, but not the elements inside it?

 

For example,

 

I currently have a navigation section that looks something like this:

 

<li id="nav-home"><a href="@url"><h4>HOME</h4></a></li>

 

So I applied a border-bottom hover effect using CSS:

 

#nav-home :hover {

border-bottom: 4px solid blah blah;

}

 

So now I have a <li> element that works fine with the hover effect, but the <a> and <h4> inside it also have this hover effect, which messes it all up.

 

 

The home link should have the underline at the bottom, but not the ones under the word 'home'

 

Thanks

Just specifiy ±nav-home li:hover{ ...;} if you only want it to apply to that element I think.

 

(I can't find the hash key on ths keyboard weird )

If you're asking the hover effect to be the actual div and not the text, why not remove the underline from the link text?

 

If there's a certain effect that you're after which can't be done this way, you may want to use images/sprites

Just specifiy ±nav-home li:hover{ ...;} if you only want it to apply to that element I think.

 

(I can't find the hash key on ths keyboard weird )

 

Ok, I've tried that but it's still not working. It seems like it should work though.

 

I should probably mention I'm testing it in Google Chrome and also that each navigation item is a different colour with it's own border colour as well, which makes it a bit fiddly!

Actually, change of plan.

 

Just had a look at it in Firefox and the fonts don't work but the hover effect does. I'm just going to use images instead. Thanks for the help anyway though! And if we do come up with a solution it could help someone that might find this thread and doesn't have the options to just use images.

Why don't you just specify in your css to not have the border/ underline on the text element?

 

#nav-home li:hover {border-bottom: 4px solid blah blah;}
#nav-home li:hover a, #nav-home li:hover a h4 {border: none;}

 

OR

 

If you remove all padding, margin and border from the parent elements up to <ul> you can use the <h4> as if it were the <li>

 

#nav-home li, #nav-home li a {border:0;padding:0;margin:0;}
#nav-home li a h4 {padding:?px,border-bottom: 4px solid;}

 

Hope that helps

I'd recommend not styling the <li> tag at all (beyond removing the margins and bullet points and positioning them next to each other) and simply styling the <a> tag. Style that to look like your <li> does now and it'll be much easier to predict what :hover styles will be needed. For bonus points, this will work in earlier versions of IE