Question

我试图让我的页面上的元素消失，并在用户点击另一个元素时重新出现。我的代码如下所示：

<script type="text/javascript">
    $('.affordable').hover(function () {
        $('#reason-a').toggle();
    });
</script>

<span class="affordable">Affordable</span>
<span class="turnaround">Fast Turnaround</span>
<span class="communication">Communication</span>

<div id="reason-a">Affordable information</div>

我希望用户能够悬停在经济实惠的课程上，然后显示价格合理的信息。然后当用户徘徊时，信息应该消失。

非常感谢

Answer 1

这是脚本实际设置的方式吗？您需要将脚本放在onload处理程序中：

$(function(){
  // Register your hover events here
});

原因是你的函数绑定的元素也不存在，并且选择器返回一个空数组（所以你没有真正绑定任何东西）。

toggle方法在没有参数的情况下交替可见性，hover方法作为mouseenter和mouseleave，传入一个委托，所以我认为切换到隐藏和显示的单独函数的建议是不必要的。

Answer 2

你应该喜欢这个

为＃reason-a添加css display none，以便在加载时不显示

#reason-a{ 
display:none
}

工作演示

<强> http://jsfiddle.net/4xruD/

将代码包装在document.ready上

$(document).ready(function() {

    $(".affordable").hover(
      function () {
        $("#reason-a").show(); // this is mouse over
      }, 
      function () {
        $("#reason-a").hide(); // this is mouseout
      }
    );


});

Answer 3

$(document).ready(function() {
    $('#reason-a').hide();
    $('.affordable').hover(
    function () {
       $('#reason-a').show();
    },
    function () {
       $('#reason-a').hide();
    });
});

jQuery悬停问题

3 个答案: