如何使用jquery在鼠标悬停时正确淡化文本

问题描述

|| http://jsfiddle.net/mplungjan/8wf5E/（现在可以使用-使用.hover（）） 将鼠标悬停在褪色div上时，以下操作显然会失败，因为这会触发鼠标移入和移入。我只需要实际文本淡入和淡出，包装div仅用于包含和调试。无位置的解决方案：绝对优先

<div id=\"container\">
  <div id=\"one\" class=\"fade\">One</div>
  <div id=\"two\" class=\"fade\">Two</div>
</div>   

$(document).ready(function() {
  $(\"#container\").mouSEOver(function () {
    $(\"#one\").fadeOut(\"slow\");
    $(\"#two\").fadeIn(\"slow\");
  }).mouSEOut(function () {
    $(\"#two\").fadeOut(\"slow\");
    $(\"#one\").fadeIn(\"slow\");
  });;
}); 

div { margin:3px; width:80px; height:80px; float:left; }
div#container { width: 100px; height:100px; border:1px solid black}
div#one { position:absolute; border:1px solid red;}
div#two { position:absolute; border:1px solid green; display:none; }

    

解决方法

我建议将

hover

函数用于此类功能...

$(document).ready(function() {
  $(\"#container\").hover(
    function(e) { 
      $(\"#one\").fadeOut(\"slow\");
      $(\"#two\").fadeIn(\"slow\");
    },function(e) {
      $(\"#two\").fadeOut(\"slow\");
      $(\"#one\").fadeIn(\"slow\");      
    }
  );
});

它解决了这个特定问题。     ,使用

mouseleave()

代替

mouseout()

似乎更好。 看这里。     ,我认为您正在寻找以下jQuery代码：

$(document).ready(function() {
  $(\"#container\").mouseenter(function () {
    $(\"#one\").fadeOut(\"slow\");
    $(\"#two\").fadeIn(\"slow\");
  }).mouseleave(function () {
    $(\"#two\").fadeOut(\"slow\");
    $(\"#one\").fadeIn(\"slow\");
  });;
});

编辑：您也可以使用一些CSS3魔术;）

div { margin:3px; width:80px; height:80px; float:left; }
div#container { width: 100px; height:100px; border:1px solid black}
div#one { position:absolute; border:1px solid red;-webkit-transition:opacity 0.5s ease-in-out;}
div#two { position:absolute; border:1px solid green; opacity:0;-webkit-transition:opacity 0.5s ease-in-out; }

div#container:hover #two{
 opacity:1;}
div#container:hover #one{
 opacity:0;}

=> http://jsfiddle.net/3WZKx/1/