如何解决如何使用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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。