CODEWITHSUNDEEP
jquery
Alexa Green
Alexa Green

Reputation: 1183

How would I toggle this html when user mouses over div element with jQuery?

I would like to show the following button on hover and remove it when the user mouses away. Here is the code I have so far:

<script>
$(document).ready(function()) {
$('div.service-item').hover().toggle().html('<br /><a href='order/products' class='button'>Get Started</a>');
}
</script>

Upvotes: 1

Views: 56

Answers (3)

aaaaaa
aaaaaa

Reputation: 2618

<script>
$(document).ready(function()) {
    $('div.service-item').bind("mouseenter", function(){
        $(this).toggle().html('<br /><a href="order/products" class="button">Get Started</a>');
    });
}
</script>

You also had typos in your link.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191749

What your function is doing is triggering the hover event for 'div.service-item' (i.e. doing nothing) and then toggling it (probably removing it). You want to do this:

$("div.service-item").hover(function () {
      $(this).html("<br /><a href='order/products' class='button'>Get Started</a>");
   },
   function () {
      $(this).html("");
   }
);

However, it would probably be better to just do this with css. Just always have that html in the div, hidden, and display it on :hover.

Upvotes: 1

Zoe Edwards
Zoe Edwards

Reputation: 13677

See the jQuery API for .hover()

$('div.service-item').hover(function() {
    // Hover in
}, function() {
    // Hover out
});

Upvotes: 1

Related Questions