悬停JQuery切换

早上好

我现在想知道是否可以使用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>

$（文档）.ready（函数（）{
$（“#flip1”）。单击（函数（）{
$（“#panel1”）。滑动切换（“500”）；
});
$（“#flip2”）。单击（函数（）{
$（“#panel2”）。滑动切换（“500”）；
});
$（“#flip3”）。单击（函数（）{
$（“#panel3”）。滑动切换（“500”）；
});
});

使用JQuery可以吗

谢谢

关于，

您可以使用和事件。。。提供执行此操作的快捷方式

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

或者一次注册所有处理程序

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

试试这个

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

阅读

您可以使用

图像上的
数据面板
，如

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

您可以使用
悬停
事件，并使用
带选择器的start
注册一个处理程序，然后获取其进度并相应地显示相关面板：

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

演示：
为什么不！！将单击更改为悬停$（“#flip1”）。悬停（而不是重复同一组代码…如果您可以共享html，我们可以帮助您更好地编写它
$("[id^=flip]").hover(function () {
    $("#panel" + this.id.replace('flip', '')).stop(true).slideToggle("500");
});