Question

当我将鼠标悬停在<div class="one">上时，我将如何简单地将<div class="two">替换为<div class="two">，反之亦然？（<div class="one">将替换为mouseleave上的<div class="one">content1</div> <div class="two">content2</div> <div class="one">content3</div> <div class="two">content4</div> <div class="one">content5</div> <div class="two">content6</div>, etc....

这是标记：

{{1}}

Answer 1

这样好吗？ http://jsfiddle.net/simevidas/vjxBK/2/

$('div.one').mouseenter(function() {
    $(this).hide().next().show();
});

$('div.two').mouseleave(function() {
    $(this).hide().prev().show();    
}

请注意，为了使此解决方案有效，.one和.two DIV对必须具有相同的高度。否则，一旦.two被隐藏，光标可能不会超过.one元素，在这种情况下，mouseleave事件将不会触发。

Answer 2

如果你将鼠标悬停在div上，然后让它消失，你就不会再在它上面盘旋了。我建议像这样的html：

<div class="outer"><span class="first">content1<span>
<div class="inner">content2</div>
</div>

然后用css之类的东西：

.outer .first {display: block;}
.outer .inner {display: none ;}

.outer:hover .first {display: none;}
.outer:hover .inner {display: block ;}

Answer 3

这是你要找的吗？

   $(".one").hover(
        function(){
            $(this).toggleClass("two","one");
        },
        function(){    
            $(this).toggleClass("two","one");
        }
    );

在包含类的Div之间切换

3 个答案: