Hover JQuery toggle

Question

Good morning,

I would like to now if I can create a hover effect with JQuery. Is it possible if the user puts the mouse over an image and then it displays a toggle effect with some text? How can I do that?

At the moment, the toggle effect is working when the user "click" on the image, but I would like to create the same effect with a simple hover.

This is my code:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
        $(document).ready(function(){
            $("#flip1").click(function(){
                $("#panel1").slideToggle("500");
            });
            $("#flip2").click(function(){
                $("#panel2").slideToggle("500");
            });
            $("#flip3").click(function(){
                $("#panel3").slideToggle("500");
            });
        });
        </script>

Is it possible with JQuery?

Thanks,

Regards,

Instead of repeating the same set of code... if you can share the html we can help you to write it better — Arun P Johny
– Arun P Johny, Commented Apr 8, 2014 at 10:58

Rohan Kumar · Accepted Answer · 2014-04-08 11:29:26Z

1

Try this,

$(document).ready(function(){
   $("#flip1").hover(function(){
      $("#panel1").stop(true).slideToggle("500");
   });
   $("#flip2").hover(function(){
      $("#panel2").stop(true).slideToggle("500");
   });
   $("#flip3").hover(function(){
      $("#panel3").stop(true).slideToggle("500");
   });
});

Read hover()

You can use data-panel on image like

<img id="flip1" data-panel="#panel1" src="..." />

Script

$(document).ready(function(){
   $("#flip1, #flip2, #flip3").hover(function(){
      $($(this).data('panel')).stop(true).slideToggle("500");
   });
});

edited Apr 8, 2014 at 11:29

answered Apr 8, 2014 at 10:58

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2014-04-08 10:57:56Z

1

You can use the mouseenter and mouseleave events... .hover() provides a shortcut to do it

$("#flip1").hover(function () {
    $("#panel1").stop(true).slideToggle("500");
});

or to register all handlers at once

$("#flip1, #flip2, #flip3").hover(function () {
    $("#panel" + this.id.replace('flip', '')).stop(true).slideToggle("500");
});

answered Apr 8, 2014 at 10:57

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Irvin Dominin · Accepted Answer · 2014-04-08 11:19:29Z

0

You can use the hover event and register one handler using a start with selector, then gets its progressive and show the relative panel accordingly:

$("[id^=flip]").hover(function () {
    $("#panel" + this.id.replace('flip', '')).stop(true).slideToggle("500");
});

Demo: http://jsfiddle.net/IrvinDominin/C3kRp/

answered Apr 8, 2014 at 11:19

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

Collectives™ on Stack Overflow

Hover JQuery toggle

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related