jquery hover changing css problem

[andrewliu]

Hello, I've been trying to figure this out and I'm not sure why my code does not work?

$(function(){
    $('ul.ldd_menu li.topLink ul').hide();
	$('div.ldd_submenu').hide();
	$('div.submenu_top').hide();
    $('li.topLink').hover(function(){
        $(this).find('ul').show()
				$(this).css({'color':'#FFF','background-color':'#000000'});
		$(this).find('div').show()
    },function(){
        $(this).find('ul').hide();
				$(this).css({'color':'#000','background-color':'#ffffff'});
		$(this).find('div').hide();

    });

});

That is my code, and the background-color works. But why doesn't my font color change colors which its supposed to?

Any suggestions?

Thanks

[Agarsia]

maybe use this in line 1:

$(document).ready(function() {

[andrewliu]

I have it in my script, I just didn't show it in here.

[Agarsia]

could you post the full script or use firefox, it will tell the line, where your error is.
or maybe you use an a-tag inside the li-tags, then the color of this a-tag will not be affected

[andrewliu]

Yeah, the a link is inside the li link

$(document).ready(function(){

$(function(){
    $('ul.ldd_menu li.topLink ul').hide();
	$('div.ldd_submenu').hide();
	$('div.submenu_top').hide();
    $('li.topLink').hover(function(){
        $(this).find('ul').show()
				$(this).css({'color':'#FFF','background-color':'#000000'});
		$(this).find('div').show()
    },function(){
        $(this).find('ul').hide();
				$(this).css({'color':'#000','background-color':'#ffffff'});
		$(this).find('div').hide();

    });

});
});

<ul id="ldd_menu" class="ldd_menu">
	<li class='topLink'>
		<span class='mainMenuTitle-first'><a href='#'>Home</a></span>
	</li>
	<li class='topLink'>
		<span class='mainMenuTitle'><a href="#">Main Menu1</a></span>
		<div class="ldd_submenu">
                <div class="submenu_top">
                <ul  class='submenu_left'>
			<li class="ldd_heading">Heading</li>
		</ul>
                </div>
                </div>
	</li>
	<li class='topLink'>
	        <span class='mainMenuTitle'><a href="#">Main Menu2</a></span>
		<div class="ldd_submenu">
                <div class="submenu_top">
		<ul>
		<li class="ldd_heading">Heading</li>
		</ul>
                </div>
		</div>
	</li>
</ul>

How would I go about fixing this?

Thank you

[Agarsia]

In your Javascript code you only access the CSS-color of you li-tags, and not of the a-tags so it has to be:

$(document).ready(function(){
 
$(function(){
    $('ul.ldd_menu li.topLink ul').hide();
	$('div.ldd_submenu').hide();
	$('div.submenu_top').hide();
    $('li.topLink').hover(function(){
        $(this).find('ul').show()
		$(this).find('div').show()
    },function(){
        $(this).find('ul').hide();
		$(this).css({'background-color':'#FFF'});
                $(this).find('a').css({'color':'#000'});
		$(this).find('div').hide();
 
    });
 
});
});

this should work :)

[andrewliu]

ahhhh it does!

Thank you!

But if you can help me take it to the next level...

find looks for all the a links. Since I'm still new to jquery and don't know all the syntax, which would be the best just to find just the link that is being hovered?

Thank you!

[Agarsia]

normally I use a simple function, that adds an ".hover" Class to all needed elements like:

$("div, ul, textarea, input, a, li").hover(function() {
  $(this).addClass('hover');
 }, function() {
  $(this).removeClass('hover');
 });

and then i code everything with CSS & HTML.
if the HTML looks like this:

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Parent Page</a>
  <ul>
   <li><a href="#">Children Page</a>
 </li>
</ul>

now the CSS looks a bit like this:

ul {margin: 0; padding: 0; list-style-type: none;}
ul li {float: left; display: block; padding: 3px 0;}
ul li a {padding: 3px 9px; color: #000;}
ul li.hover {background: #000;}
ul li.hover a {color: #fff;}
ul li ul {display: none; position: absolute; z-index: 1;}
ul li.hover ul {display: block;}
ul li.hover li {background: #000;}

[andrewliu]

OH!

I played around with it! and i'm getting jquery!

Thank you !!