CODEWITHSUNDEEP
jqueryhtmlcss
Tyler Ramsey
Tyler Ramsey

Reputation: 31

How to write less code when creating mouseover effect with jQuery

I apologize right now for the sloppy wording of this question, I'll try to explain my problem the best that I can.

Lets say I'm making a list of apples, bananas, and kiwis. I want to create a jQuery effect where the element that my mouse is over will be underlined only while my mouse is over it, without having to write too much code if that's possible. This is the most efficient way I currently know

<div id='myFavFruit'>
        <p id='apples'>apples</p>
        <p id='bananas'>bananas</p>
        <p id='kiwi'>kiwi</p>
    </div>

    $('#apples').mouseenter(function() {
    $('#apples').css("text-decoration","underline");
    });

    $('#apples').mouseleave(function() {
       $('#apples').css("text-decoration","none");
    });

    $('#bananas').mouseenter(function() {
       $('#bananas').css("text-decoration","underline");
    });

    $('#bananas').mouseleave(function() {
      $('#bananas').css("text-decoration","none);
    });

    $('#kiwi').mouseenter(function() {
      $('#kiwi').css("text-decoration","underline");
    });

    $('#kiwi').mouseleave(function() {
      $('#kiwi').css("text-decoration","none");
    });

Thanks for the help!

Upvotes: 1

Views: 91

Answers (10)

gtlambert
gtlambert

Reputation: 11961

It would be a lot easier to just use plain CSS. You can target the elements by ID or with only one line if using a class.

#apples:hover,
#bananas:hover,
#kiwis:hover {
  text-decoration: underline;
}

Upvotes: 4

Anwar
Anwar

Reputation: 4246

Check this JSFiddle :

HTML

<div id='myFavFruit'>
<p id='apples' class="fruit">apples</p>
<p id='bananas' class="fruit">bananas</p>
<p id='kiwi' class="fruit">kiwi</p>

JavaScript

$(function() { // DOM loaded event handler 

    // When mouse hover a fruit : apply underlying style
    $("#myFavFruit .fruit").mouseenter(function() {
        $(this).css("text-decoration","underline");
    });

    // When mouse leave a fruit : removing underlying style
    $("#myFavFruit .fruit").mouseleave(function() {
        $(this).css("text-decoration","initial");
    });

});

Explaination

I added a class to all your fruit, which let me scope both of them with a single css selector in the two function .mouseenter() and .mouseleave().

So when you have the JQuery selector $("#myFavFruit .fruit"), it means give me all the element that have the class "fruit" in my parent element "myFavFruit".

Upvotes: 0

Rajesh kannan
Rajesh kannan

Reputation: 634

Add only this line that is enough

$("#myFavFruit").find("p").hover(function() { $(this).css("text-decoration","underline"); });

let me know if it is helpful

Upvotes: 0

imGaurav
imGaurav

Reputation: 1053

use pure css as it can be done without js/jquery 

li:hover {
  text-decoration: underline;
}
ul {
  list-style: none;
}
<ul>
  <li>apples</li>
  <li>bananas</li>
  <li>kiwi</li>
</ul>

Upvotes: 0

fjaguero
fjaguero

Reputation: 185

As @lambo477 said, it can be done with CSS. Anyway, a shortcut for that in jQuery is to use the .hover() method.

Example:

$( "li" ).hover(
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
  }
);

See the jQuery documentation page for more details.

Upvotes: 0

Rajan Goswami
Rajan Goswami

Reputation: 769

Working Fiddle: http://jsfiddle.net/ey9k5mnu/

$(function () {
    var pFruit = $("#myFavFruit").find("p");
    $(pFruit).mouseenter(function () {
        $(this).css("text-decoration", "underline");
    }).mouseleave(function () {
        $(this).css("text-decoration", "none");
    });
})

Upvotes: 0

CoursesWeb
CoursesWeb

Reputation: 4237

Try this, if you want with jquery:

$('#myFavFruit p').mouseenter(function() {
  $(this).css("text-decoration","underline");
});

$('#myFavFruit p').mouseleave(function() {
  $(this).css("text-decoration","none");
});

Upvotes: 0

Ɛɔıs3
Ɛɔıs3

Reputation: 7853

You could do that only with css like that :

#myFavFruit p:hover {
   text-decoration: underline;
}

Or with jQuery (FIDDLE)

$('#myFavFruit p').on("mouseenter", function() {
    $(this).css("text-decoration","underline");
}).on("mouseleave", function() {
    $(this).css("text-decoration","none");
});

Upvotes: 0

Cosmin
Cosmin

Reputation: 1490

Even better:

#myFavFruit p:hover {
  text-decoration: underline;
}

Upvotes: 1

rrk
rrk

Reputation: 15846

$('#myFavFruit p')
    .mouseenter(function() {
       $(this).css("text-decoration","underline");
    })
    .mouseleave(function() {
       $(this).css("text-decoration","none");
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id='myFavFruit'>
        <p id='apples'>apples</p>
        <p id='bananas'>bananas</p>
        <p id='kiwi'>kiwi</p>
    </div>

Upvotes: 0

Related Questions