Question

早上好，

如果我可以使用JQuery创建悬停效果，我现在想。用户是否可以将鼠标放在图像上，然后用一些文本显示切换效果？我怎么能这样做？

目前，当用户“点击”图像时，切换效果正常，但我希望通过简单的悬停创建相同的效果。

这是我的代码：

<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>

JQuery可以吗？

谢谢，

此致

Answer 1

您可以使用mouseenter和mouseleave个活动... .hover()提供快捷方式

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

或立即注册所有处理程序

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

Answer 2

试试这个，

$(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");
   });
});

阅读hover()

您可以在data-panel上使用image

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

<强>脚本

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

Answer 3

您可以使用hover事件并使用start with selector注册一个处理程序，然后获取其渐进式并相应地显示相关面板：

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

演示：http://jsfiddle.net/IrvinDominin/C3kRp/

悬停JQuery切换

3 个答案: