Very simple Jquery question

[Drongo_III]

Hi Guys

 

I feel a bit silly asking this but I've started using a jquery drop down menu script. It's fantastically simple but I don't quite follow these two lines of code or see how it works as I'm not a huge user of jquery.

 

 

The jquery is:

 

	$(document).ready(function(){
		$('#cssdropdown li.headlink').hover(
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); });
	});

 

Ok I understand the .hover bit - so when someone hovers over the li.headlink elemenet it will display block. But i am confused about two points

 

1) The "ul,this" part - is that saying - When someone hovers over li.headlink then display the UL element inside the li.headlink element?

 

2) In conventional old javascript you'd use onmouseover and onmouseout to trigger the state change from 'block' to 'none'. But to me these lines of code are saying "when someone hovers over li.headlink then display it as a block then display it as none" - which to my poor logic would mean the item should not display at all. I suspect maybe it's a syntax thing and the comma between functions has something to do with it but i'm not sure. Can you someone explain why this works and what it's actually saying?

 

 

Sorry to ask such silly questions but I like to understand the things i use and in honesty i don't with this most simple of scripts...

 

Thanks

 

Drongo

 

 

 

[HanneSThEGreaT]

Have a look at this link, it seems to explain it much better :

 

http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

 

I hope it helps!

[Drongo_III]

Thanks for the post!

 

Afraid that doesn't quite help me to undersand the logic of the jquery :/ Anyone help?

 

 

[AyKay47]

I will help you to understand this better.

 

1. This is saying.. when the user hovers over the li.headlink within the element of id cssdropdown, display all ul elements and li.headlink elements as a block..

 

2. the jquery hover function accepts 2 arguments, the first argument is a custom handler to handle the onmouseover event.. the second argument controls the onmouseout event, so that code is stating when the mouse is hovered over the element, set the css of the elements ul and li.headlink as block, when the mouse is not hovered over the li.headlink element.. display the ul and li.headlink elements as hidden again..

 

this link should help as well...

http://api.jquery.com/hover/

[Drongo_III]

Hi

 

Thanks for that mate! It's much clearer to me now.

 

I didn't realise the hover function required a mouseover and mouseout event - for some reason i thought it just executed everything inside.

 

It all makes sense now

 

Thank you!

 

Drongo

 

 

 

 

I will help you to understand this better.

 

1. This is saying.. when the user hovers over the li.headlink within the element of id cssdropdown, display all ul elements and li.headlink elements as a block..

 

2. the jquery hover function accepts 2 arguments, the first argument is a custom handler to handle the onmouseover event.. the second argument controls the onmouseout event, so that code is stating when the mouse is hovered over the element, set the css of the elements ul and li.headlink as block, when the mouse is not hovered over the li.headlink element.. display the ul and li.headlink elements as hidden again..

 

this link should help as well...

http://api.jquery.com/hover/