Question

我遇到了问题，我需要你的帮助。

因此，当您将鼠标悬停在li标签中时，我正在尝试制作一个显示内容的菜单。当您在第一个li选项上执行鼠标悬停时，或者当没有一个li悬停时，第一个内容需要始终显示。

我试图制作这个，你可以在这里看到一个演示：https://jsfiddle.net/sqftzuja/

正如您所看到的，它不是那么好用，有时会显示多个内容。

我的剧本

$(document).ready(function() {
  $("#nav3 li:first-child").addClass("tab-active");
  $('#nav3 li').click(function() {


    var section4 = $(this).attr('data-id');
    $("#nav3 li").removeClass("tab-active");
    $(this).addClass("tab-active");

    $('.tv-corporativa').hide(); 
    $(section4).fadeIn(800);

   });
});

如果有人能帮助我改进它，它将对我有很大的帮助！

提前致谢！

Answer 1

jquery hover有两个参数，一个用于指针进入元素，另一个用于离开元素。

e.g。

$('selector').hover(one_function, two_function)

您可以使用悬停并调用第二个函数或使用onmouseover事件。

这是onmouseover https://jsfiddle.net/sqftzuja/1/

的小提琴

Answer 2

您的代码是正确的。你只需要stop正在运行的动画。

$(section4).stop( true, true ).fadeIn(800);

这将解决旧代码中的问题。

Answer 3

你必须停止淡入动画。当你在给定的interval.i更新小提琴之后淡入它的效果

$(document).ready(function() {
   $("#nav3 li:first-child").addClass("tab-active");
    $('#nav3 li').hover(function() {

    //console.info(  $(this).attr('href') );
    var section4 = $(this).attr('data-id');
    $("#nav3 li").removeClass("tab-active");
    $(this).addClass("tab-active");

    $('.tv-corporativa').stop().hide(); 
    $(section4).fadeIn(800);

  });
});

在悬停菜单时淡出内容<li>问题

3 个答案: