在包含類別的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之間切換

回答

相關問題