jQuery將div切換到鼠標上

有人知道一個簡單的jquery腳本，可以在懸停時切換/更改div嗎？jQuery將div切換到鼠標上

E.G.

我有3個li元素：

<ul> 
    <li><a href="#" id="link1">Link1</a></li> 
    <li><a href="#" id="link2">Link2</a></li> 
    <li><a href="#" id="link3">Link3</a></li> 
</ul>

，並有3個DIV容器：

<div id="container1">content 1</div> 
<div id="container2">content 2</div> 
<div id="container3">content 3</div>

所以，我當頁面打開DIV＃container1是vissible，想和＃container2的，＃ container3隱藏。然後，如果用戶「HOVER」link2或link3＃container1被隱藏，並且＃container2或＃container3將變得易用。我希望你有我的觀點。如果有人想幫忙，我創建了fiddle。

來源

2013-04-07 AndrewS

$('#container2, #container3').hide(); 
$('li a').mouseover(function(){ 
    var idx= $(this).attr('id').substr(-1); 
    $('#container1, #container2, #container3').hide(); 
    $('#container'+idx).show(); 
});

jsFiddle example

來源

2013-04-07 15:27:34 j08691

非常好！謝謝！ – AndrewS 2013-04-07 15:29:50

+1與我的類似，唯一不同的是，.hide可能會因爲很多div而變得醜陋，可能希望將它放在.each中？ – 2013-04-07 15:36:03

@RickCalder - Nah，我會將div分配給一個類。更容易。 – j08691 2013-04-07 15:39:07

設置.container到顯示：無在CSS

小提琴：http://jsfiddle.net/calder12/nVx7a/14/

的jQuery：

$(".link").hover(function(){ 
    var whichOne = $(this).attr("id").substring(4); 
    $(".container").each(function(){ 
    if($(this).attr("id")=="container"+whichOne) 
    { 
     $(this).show(); 
    } else { 
     $(this).hide(); 
    } 
    }); 
});

HTML：

<ul> 
     <li><a href="#" id="link1" class="link">Link1</a></li> 
     <li><a href="#" id="link2" class="link">Link2</a></li> 
     <li><a href="#" id="link3" class="link">Link3</a></li> 
</ul> 

<div id="container1" class="container">content 1</div> 
<div id="container2" class="container">content 2</div> 
<div id="container3" class="container">content 3</div>

來源

2013-04-07 15:34:17

jQuery將div切換到鼠標上

回答

相關問題