I'm new to jQuery and I'm just trying to mess around with it at the moment and learn the basics. Now, if I would like to use jQuery for a hover effect instead of CSS, how would I go about doing so (using functions other than .hover)?



With the above code I have 4 links in a menu (li.menu a is the selector ofc). When I use the jQuery above, all 4 of them turn red when I hover over 1. I would like to know how to make it so only works on the current one I'm hovered over.

Unrelated to this problem, how long do you think I'd have to study jQuery before I can make a simple gallery by myself that lets me click the picture, open up a box on the page, and scroll through the rest? That's ultimately my goal. I would like to make a cool gallery for my portfolio as opposed to downloading a script.

EDIT: I know it's a lot easier to just do it in CSS but learning this way will help me get the syntax down at least lol. Surely I don't have to assign a class to each link in the menu and use that little bit of code for each one. That's the only way I know how to make it select just 1 instead of all 4.



That seems like way too much code for something simple.

This post was edited by Santora on Jun 9 2014 05:50pm

i'm by no means a javascript/css expert, but i'm guessing you can use IDs. give your li id=1, then your "a" can have id='a1'. then on mouseenter, just append 'a' with the id of current mouseenter control, find that control, and change its css.

then your second li has id=2 and its corresponding a can have id='a2', etc

This post was edited by carteblanche on Jun 9 2014 06:06pm

I appreciate the help. I believe that's exactly what I did with the second set of code except I used classes to give the selectors an identity. I'm just hoping there is an easier way to do it with jQuery because all of that jQuery code is the equivalent of:



I think there is a .hover function in jQuery, I'll check that out.

surely your event handlers have a parameter which tells you the caller? then attach the same event handler to all your li in your markup, and use the param to identify what control needs the new background.

This post was edited by carteblanche on Jun 9 2014 08:16pm

Apparently "this" is crucial lol. Ended up figuring it out. I just created a new class (hover) and used the hover function in jQuery. I should have just went with that function to begin with instead of trying to complicate things lol.



This post was edited by Santora on Jun 10 2014 12:26am

Yup, "this" is a reference to the DOM element of invocation in a callback.

$() is the jQuery constructor, so $(this) lets you use jQuery functions on that DOM element

This post was edited by Schwag on Jun 10 2014 03:22pm