在包含类别的Div之间切换

当我将鼠标悬停在其上时，我将如何简单地将<div class="one">替换为以下<div class="two">？反之亦然？（<div class="two">将<div class="one">在鼠标离开代替）在包含类别的Div之间切换

下面是标记：

<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....

来源

2011-02-27 Rimsky

如果你将鼠标悬停在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 ;}

来源

2011-02-27 02:44:31 markijbema

如果你想在IE8中支持这个，你需要用jQuery来做到这一点。 – 2011-02-27 02:46:14

它实际上自IE7以来，只要你使用严格，并且不要让IE踢入怪癖模式。 http://www.bernzilla.com/item.php?id=762 – markijbema 2011-02-27 02:51:11

这样行吗？ 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事件不会触发。

来源

2011-02-27 02:46:12

SO的模式是发布答案。否则，解决方案对于数据转储是盲目的，或者如果jsfiddle宕机，则会丢失。 – 2011-02-27 02:49:00

@Stefan True ... – 2011-02-27 02:50:18

太棒了！这工作。我正在和.find一起工作，忘记了next（）和prev（）。谢谢并感谢大家在这个星期六晚上！ – Rimsky 2011-02-27 03:55:23

这是你在找什么？

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

来源

2011-02-27 02:52:03

在包含类别的Div之间切换

回答

相关问题