Question

Im having trouble with basic syntax.
I want to use jquery to select all elements in a CSS class,
then add an action when the user hovers on the item

$(".item").hover(function(){$(this).fadeTo(100, .1)});

is it possble to assign different functions to onmouseenter and onmouseleave as well? I’m having a bit of trouble locating similar code.

Answer 1

With .hover(), you can pass two functions.

$(".item").hover(
    function(){$(this).fadeTo(100, .1)},
    function(){$(this).fadeTo(100, 1)}
);

These will be assigned as mouseenter and mouseleave events.

---

Of course you could do it manually as well.

$(".item").mouseenter(function(){$(this).fadeTo(100, .1)})
          .mouseleave(function(){$(this).fadeTo(100, 1)});

---

Or you could even reuse the same function, and just test the event object.

$(".item").hover(function(event){
    $(this).fadeTo(100, event.type === 'mouseenter' ? .1 : 1);
});