...

View Full Version : Nav Links problem - Solve with jQuery or css?



LimeX
06-08-2012, 02:55 PM
Hi!
I'm working on a website design where I have a horizontal dropdown menu.

When an item is hovered I want it's text and background to change color.
Sounds simple.
Here's my markup:



<div id="nav-bar">
<li class="nav-link"><a href="#" class="">Home</a></li>
<li class="nav-link"><a href="#" class="">About</a></li>
<li class="nav-link"><a href="#" class="">Categories</a></li>
<li class="nav-link"><a href="#" class="">Contact Us</a></li>
</div>


The problem is that when I hover over the button the text doesnt change, cause it is controlled by li.nav-link a:hover.
Therefore you need to hover over the actual text.

So when you hover over the buttons edge and not the text itself the text is the same while the background is changed.

Should I fix this with Jquery (and how would that code look like, I'm not very good at jQuery) Or is there some simple problem-solving CSS-Code I've missed?

Thankyou
//Will

Will Bontrager
06-08-2012, 03:37 PM
This might work for you:



<div id="nav-bar">
<li class="nav-link"><a href="#" class="" onmouseover="ChangeColor(this)" onmouseout="RestoreDefault(this)">Home</a></li>
<li class="nav-link"><a href="#" class="" onmouseover="ChangeColor(this)" onmouseout="RestoreDefault(this)">About</a></li>
<li class="nav-link"><a href="#" class="" onmouseover="ChangeColor(this)" onmouseout="RestoreDefault(this)">Categories</a></li>
<li class="nav-link"><a href="#" class="" onmouseover="ChangeColor(this)" onmouseout="RestoreDefault(this)">Contact Us</a></li>
</div>


<script type="text/javascript">
function ChangeColor(d) {
d.style.color = "white";
d.style.backgroundColor = "blue";
}

function RestoreDefault(d) {
d.style.color = "black";
d.style.backgroundColor = "white";
}
</script>


Will

LimeX
06-09-2012, 05:42 PM
Thanks for your reply.
However, this sulotion wont work.
I need to say:
When this li is hovered, style the nested a.

How do i do that in jQuery? :)

Candygirl
06-09-2012, 06:36 PM
Or is there some simple problem-solving CSS-Code I've missed?

Could you please post the css ?
You juste have to choose the right selector and it supposed to work...

Something like that:


li.nav-link:hover a {color:red;}

You may have a selector's specificty problem, hard to say not seeing your entire css

LimeX
06-10-2012, 01:22 AM
Could you please post the css ?
You juste have to choose the right selector and it supposed to work...

Something like that:


li.nav-link:hover a {color:red;}

You may have a selector's specificty problem, hard to say not seeing your entire css

It was that simple. I will never be able to call myself a webdesigner or say i know css anymore. That was just.. How did I miss that?
FML.

Thank you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum