Question

$(document).ready(function () {
    $("#aboutme-block").hide();
    $("#stories-block").hide();

    $("div.aboutme").hover(function () {
        $("#aboutme-block").fadeIn(1000);
        $("#stories-block").hide();
    });

    $("div.stories").hover(function () {
        $("#stories-block").fadeIn(1000);
        $("#aboutme-block").hide();
    }); 
});

有人可以告诉我这里有什么问题吗？

Answer 1

不确定问题是什么，但我会阻止不必要的动画发生。

$(document).ready(function(){
  $("#aboutme-block,#stories-block").hide();

  $("div.aboutme").mouseenter(function() {
    $("#aboutme-block:hidden").fadeIn(1000);
    $("#stories-block").stop(true,true).hide();
  });

  $("div.stories").mouseenter(function(){
    $("#stories-block:hidden").fadeIn(1000);
    $("#aboutme-block").stop(true,true).hide();
  }); 
});

这是一个缩短版本，重用了相同的处理程序：

$(document).ready(function() {
    var blocks = $("#aboutme-block,#stories-block").hide();

    $("div.aboutme,div.stories").mouseenter(function() {
        var isAboutme = $(this).hasClass('aboutme');
        blocks.eq(+(!isAboutme)).filter(":hidden").fadeIn(1000);
        blocks.eq(+(isAboutme)).stop(true, true).hide();
    });
});

Answer 2

你有$("div.aboutme").hover ...。是否找到了这个控件？

Answer 3

使用mouseover代替hover：

$(document).ready(function(){
  $("#aboutme-block").hide();
  $("#stories-block").hide();

  $("div.aboutme").mouseover(function() {
    $("#aboutme-block").fadeIn(1000);
    $("#stories-block").hide();
  });

  $("div.stories").mouseover(function(){
    $("#stories-block").fadeIn(1000);
    $("#aboutme-block").hide();
  }); 
});

Answer 4

问题已经解决。问题出在JQuery版本的运行上。如果您尝试使用版本1.2.6运行patrick's example，则无效。使用更高版本可以解决问题。谢谢大家的帮助：）

JQuery多个悬停效果不起作用

4 个答案: