如何使用javascript在多個div上顯示鼠標懸停的div？

我有相同的類pro3一個多股利和帶班showcatdiv如何使用javascript在多個div上顯示鼠標懸停的div？

的圖像，是這..我想顯示分度pro3上的showcatdiv下面懸停WordPress的頁面上的任何圖像上追加是我pro3 DIV

<div class="pro3catProducts" style=" background-color: #FFFFFF; border: 0px solid black; 
    height: 279px; left: '200'px; opacity: 0.55; padding-left: 10px; 
    position: relative; top: '100'px; width: 39px; display:none;"> 
      <IMG class="catsmallImages" id="catsmallImages1" SRC="Images/fashion.png" BORDER="1" ALT="" style="height: 37px; padding: 3px; width: 28px;"> 
      <IMG class="catsmallImages" id="catsmallImages2" SRC="Images/fashion.png" BORDER="1" ALT=""> 
       </div>

我寫了一個javascript爲它

<script type="text/javascript"> 
    if (undefined !== window.jQuery) { 
    // script dependent on jQuery 

     alert("test"); 
     jQuery(".showcatdiv").hover(function(){ 
      //alert("test324"); 
    jQuery(".pro3catProducts").show(); 
    }); 

    } 
</script>

有了這個它顯示在每一個我的PRO3 DIV法師..我想顯示在特定的圖像？

Image One

Image Two

第一張圖片顯示上，我想有一個懸停效果的圖像......和第二圖像做什麼，我需要，但我只想說perticular圖像上，並在這裏是否顯示在所有圖像..

來源

2013-04-30 Vaibs_Cool

你可以發佈你的完整html ..你定義'showcatdiv'類的部分 – bipen 2013-04-30 10:10:05

什麼是'.showcatdiv'？ pro3catProducts的父親？ – MMM 2013-04-30 10:13:28

另外，不要做'left：'200'px'，這是錯誤的 - 擺脫引號 – MMM 2013-04-30 10:14:26

如果pro3和showcatdiv都在maindiv，並且你要顯示pro3當你將鼠標懸停在showcatdiv，您可以使用CSS來實現這一目標：

.pro3 { 
    display: none; 
} 
.showcatdiv:hover+.pro3 { 
    display: block; 
}

http://jsfiddle.net/KvrGk/2/

無需對JavaScript，特別是jQuery。但是爲兄弟選擇器做check the support。

來源

2013-04-30 10:21:53 MMM

但你誤會了這個 - 'showcatdiv'是可見的，而'pro3'是默認隱藏的，因此沒有'：hover'可以在'pro3' div上執行... – shadyyx 2013-04-30 10:23:46

「我想在pro3上懸停顯示div showcatdiv「 - 對，只是換掉它。 – MMM 2013-04-30 10:25:16

是的，它看起來不錯，我喜歡使用CSS的想法，並且完全不需要jQuery（JS）！ +1 – shadyyx 2013-04-30 10:26:26

有一個DIV Maindiv

01 PRO3和showcatdiv ......他們兩個R之間沒有關係

看到你的評論，如果他們是一個DIV中..然後用this參考獲取父找到.pro3catProducts 試試這個..

<script type="text/javascript"> 
if (undefined !== window.jQuery) { 
    alert("test"); 
    jQuery(".showcatdiv").hover(function(){ 
     jQuery(this).parent().find(".pro3catProducts").show(); //<--here 
    }); 

} 
</script>

來源

2013-04-30 10:17:12 bipen

OK，讓我們假設img是這樣pro3 DIV的兄弟姐妹：

<img class="showCatDiv" ... /> 
<div class="pro3..." ... >...</div>

那麼JS是：

$('.showCatDiv').hover(function(){ 
    $(this).parent().find('.pro3').show(); 
});

找到他們的共同父母，然後尋找這個pro3 div來顯示。

或者

$('.showCatDiv').hover(function(){ 
    $(this).next('.pro3').show(); 
});

這依賴於pro3股利是img的兄弟。

來源

2013-04-30 10:19:34 shadyyx

如何使用javascript在多個div上顯示鼠標懸停的div？

回答

相關問題