動態創建鼠標移動效果

我正在創建一個照片庫，其中可以包含隨機數量的圖庫項目。代碼看起來像：動態創建鼠標移動效果

<div class="gallery-item"> 
    <div id="gal-img1"><a href=""><img src="15.jpg"></a></div> 
    <div class="gal-desc" id="gal-desc1"><h5>Title</h5></div> 
</div> 
......... 

<div class="gallery-item"> 
    <div id="gal-imgn"><a href=""><img src="15.jpg"></a></div> 
    <div class="gal-desc" id="gal-descn"><h5>Title</h5></div> 
</div>

類 'GAL-降序' 具有 '顯示' 設置爲 '無' 和GAL-IMG（1）到GAL-IMG（n）的鼠標懸停我想要設置的'display'將其對應的gal-desc（1）的'block'設置爲gal-desc（n）。

我可以手動插入以下代碼，從1到100可以說，但如果我將得到40個圖庫項目，我將有60鼠標懸停不可用。如果我有110個畫廊項目，那麼10個項目不會產生預期的效果。

$("#gal-img1").mouseover(function(){ 
    $("#gal-desc1").css('display','block'); 
});

的庫項目的格言號我$（「DIV [ID^= GAL-IMG]」）。長度得到它，但是從這裏我被困。

你能請我們給我一個ideea，我必須走哪個方向。

謝謝。

來源

2012-12-05 Arizona2014

你走錯路了---->這個<-----是你的答案。而不是使用id來選擇要更改的元素，請使用該類，然後將其稱爲此。我會給你一個答案的例子。 –

您可以使用您使用的是獲得正確的元素數量相同的選擇目標的所有元素，然後在功能使用上下文裏面只是懸停元素的父裏面.gal-desc元素目標.gallery-item等：

$("div[id^=gal-img]").on('mouseenter', function() { 
    $(this).closest('.gallery-item').find('.gal-desc').show(); 
});

或切換上的mouseenter可視性/離開

$("div[id^=gal-img]").on('mouseenter mouseleave', function(e) { 
    $(this).closest('.gallery-item').find('.gal-desc').toggle(e.type=='mouseenter'); 
});

來源

2012-12-05 19:54:50 adeneo

謝謝......那正是我想要的 – Arizona2014

我不知道我明白這個問題，也許你正在尋找一些CSS？喜歡的東西：

.gallery-item > div:first-child:hover{display:block;}

來源

2012-12-05 19:54:31 daniel

坦率地說...如果它比jquery代碼更簡單，我會preffer css ...我只想讓那些名爲gal-desc的描述div顯示在任何gallery-items mouseover事件 – Arizona2014

嘗試.gallery-item：hover > div + div {display：block;} – daniel

使用事件代表團，WH ich可以使用$ .on在jQuery中使用。將所有.gallery-items包裝在一個容器中，使其像我在下面用.gallery所做的那樣工作。這將允許無限數量的.gallery-items並且非常高效。

<div class="gallery"> 
    <div class="gallery-item"> 
     <div id="gal-imgn"><a href=""><img src="15.jpg"></a></div> 
     <div class="gal-desc" id="gal-descn"><h5>Title</h5></div> 
    </div> 
    ..... 
</div> 
..... 
$('.gallery').on('mouseenter mouseleave', '.gallery-item', function (e) { 
    if (e.type === 'mouseenter') { 
     $(this).find('.gal-desc').show(); 
    } 
    else { 
     $(this).find('.gal-desc').hide(); 
    } 
});

來源

2012-12-05 19:58:33

看着你的代碼，我認爲它和上面的代碼一樣...代碼對我有好處......謝謝 – Arizona2014

不*相當*相同。這一個使用事件代表團。 –

變化

<div id="gal-imgn">

到

<div class="gal-img">

然後做到這一點：

$(".gal-img").mouseover(function(){ 
    $(this).next(".gal-desc").show(); 
});

還可以添加鼠標移開這樣的：

$(".gal-img").mouseover(function(){ 
    $(this).next(".gal-desc").show(); 
}).mouseout(function(){ 
    $(this).next(".gal-desc").hide(); 
};

這裏是一個jsfiddle這個（低效率）代碼的樂趣。 http://jsfiddle.net/d27Nn/1/

來源

2012-12-05 20:02:11

使用此方法的性能成本很高（將單個事件處理程序綁定到可能的100個項目），並且不允許動態DOM插入。 –

有趣，我看到你的觀點布賴恩，我想我開發一個小內部的地方，所以我不考慮性能。我喜歡Brians解決方案。 –

但Brian，你沒有做一個很好的JSFIDDLE來演示你的解決方案。 –

動態創建鼠標移動效果

回答

相關問題