Jump to content

Very simple Jquery question


Drongo_III
 Share

Recommended Posts

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

 

 

 

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.