JQuery - How Can I Adjust css hovers?

JavaScript
1

Hi Guys,
I’ve been messing around with some basic jquery stuff and I’ve ran into a problem, one that I think is probably very easy to explain and get around.

I’ve made a vertical css menu from a list, and 1 of those list items has a ul as it’s list item, with several items within it.

When the parent li is hovered over I’ve set it so that the child ul and it’s li’s to drop down below it.

I want to use jquery to adjust this child ul so that display is set to none, but I can’t seem to work it out (Other than just giving the ul it’s own class or ID, but I’d rather learn how to do it another way).

Here’s the jquery I’ve got that theoretically should work (but doesn’t):

[javascript]
$(document).ready(function(){
$(‘#sidebar1 > li:hover > ul’).css(‘display’,‘none’);
});
[/javascript]

[css]
#sidebar1 li:hover ul{
display:block;
float:left;
width:130px;
margin: 10px -1px 10px -11px;
}
[/css]

I think the problem lie in the li:hover part of the jquery, I’m guessing that it’s not allowed, or simply doesn’t work that way.

Can someone suggest the correct way for me.

I want jquery to set the display of that sub ul to none, then set a click or hover effect on it so it slides down in a fancy way (I’m pretty sure I can figure that part out on my own though.)

Any help would be much appreciated.

regards
steve

2

Try something along the lines of

$('#sidebar1 > li').hover(function() { $(this).find('ul').hide(); });
3

thanks for the attempt, but it had no effect un fortunately.
Do you have any other ideas?

4

That was just a snippet to give you an idea. Could you post the full code that you tried implementing?

5

The only thing I want to learn how to do is to hide something with jquery (By setting it’s display property to none), if it’s already set to display on hover over in the css.

Basically, lets just use a standard ul, and the li’s have a hover property in the css to set the background color to blue, how can I disable that in jquery.

I can’t seem to use “ul > li:hover”

So how can I access and manipulate “li:hover”

Will I have to create a hover function such as:

$(‘ul > li’).hover(function(){
($this).css(‘property’,‘value’); //To set it to nothing
($this).css(‘background-color’,‘black’); //To set it to the new hover effect
});

I’m not really sure how I can explain this easily.
1 more attempt :slight_smile:

The sub ul is a dropdown when it’s hovered over. I want to disable it by hiding it, then use jquery to make it slide down in a fancy way, rather than just appearing.

6

So you’re wanting to programatically reverse a hover effect.

It can help if we see what we’re working with:


<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

The background color is set as follows:


li {
	background-color: lightgrey;
}
li:hover {
	background-color: blue;
}

The jquery cannot use selectors to perform dynamic behaviour. Instead, there is a hover method that you can use instead.


$('li').hover(function() {
    $(this).css({'backgroundColor': 'black'});
}, function() {
    $(this).css({'backgroundColor': ''});
});

Here’s the full test code


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;style type="text/css"&gt;
li {
	background-color: lightgrey;
}
li:hover {
	background-color: blue;
}
&lt;/style&gt;
&lt;script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"&gt; &lt;/script&gt;
&lt;script&gt;
$(function () {
	$('li').hover(function() {
	    $(this).css({'backgroundColor': 'black'});
	}, function() {
	    $(this).css({'backgroundColor': ''});
	});
}
&lt;/script&gt;
`&lt;/head&gt;
&lt;body&gt;
&lt;ul&gt;
	&lt;li&gt;Item 1&lt;/li&gt;
	&lt;li&gt;Item 2&lt;/li&gt;
	&lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
7

I probably should have used a real example to make it easier, can’t believe I didn’t think to sooner.

http://www.makeagreatsite.com/experiments/layout.htm

If you hover over the left menu item “Gallery” a new menu will come down. That’s the sub menu that is default to none, but set to display as block on hover.

I want to disable that effect with jquery. By default the li > ul is set to display none, but when that that li (That’s the parent of a ul) is hovered over, it changes the display of that sub ul to display block with


li:hover > ul {
display:block;
}

So I want to manupulate the “li:hover > ul” selector.

Does that make more sense, I’m still not sure if I’m explaining it as well as I can.

I know I could simply have the list display as none and JUST use jquery to make the fancy sliding effect, but I want my code to degrade gracefully.

8

I understand what you want to do, but I have to say that I don’t know of a good way to achieve it.