CODEWITHSUNDEEP
javascripthtmlhover
xan
xan

Reputation: 4696

Remove jQuery hover effect

When mouse hovers on a link, suppose effect X takes place. How can I restore the original when the mouse has moved away?

For instance, I tried to modify the link-behavior using javascript. The link changes on hovering mouse, but how can I revert the change?

HTML code:

<ul id="nav">
    <li id="a1"><a href="#">original link 1</a></li>
    <li id="a2"><a href="#">hover link 1</a></li>
    <li id="b1"><a href="#">original link 1</a></li>
    <li id="b2"><a href="#">hover link 1</a></li>
    <li id="c1"><a href="#">original link 1</a></li>
    <li id="c2"><a href="#">hover link 1</a></li>
</ul>

Javascript Code:

$("#nav a li").hover(function () {
     $('#' +this.id.charAt(0)+"1").hide();
});

Upvotes: 0

Views: 7185

Answers (4)

Dawson
Dawson

Reputation: 7597

The code you wrote is equivalent to $(selector).on("mouseenter mouseleave", handlerInOut);

Use valid markup...

<ul id="nav">
    <li><a href="#">hover link 1</a></li>
    <li><a href="#">hover link 2</a></li>
</ul>

JQuery

$("#nav a li").hover(function () {
     $('#' +this.id.charAt(0)+"1").hide();
 }, function() {
     $('#' +this.id.charAt(0)+"1").show();
});

from the jQuery API docs: http://api.jquery.com/hover/

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

Upvotes: 0

NullPointerException
NullPointerException

Reputation: 3804

Use mouseover and mouseout jQuery insted of hover

Upvotes: 0

steo
steo

Reputation: 4656

Try

 $("#nav a li").on('hover', function () {
   //mousehover
 } , function(){
   //mouseout
 } );

Upvotes: 1

Donald T
Donald T

Reputation: 10637

Use CSS instead, after correcting your HTML markup. This will give you better performance, less code, and is more "proper" because visual details should be left to CSS.

#nav li:hover {
  display: none;
}

Update: After trying to understand your markup further, I see better what you are trying to do. You seem to want to hide the next <li> element. In that case, use a CSS adjacency selector:

#nav li:hover + li {
  display: none;
}

Upvotes: 2

Related Questions