0

我有许多具有同一类的 divpro3和一个具有类的图像showcatdiv

这被附加在 wordpress 页面上的任何图像上。我想pro3在悬停时显示 divshowcatdiv下面是我的pro3div

 <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..我想在那个特定图像上显示？？

图一

图二

第一个图像显示了我想要悬停效果的图像......第二个图像做了我需要的，但我只想要那个特定的图像，这里它显示在所有图像上..

4

3 回答 3

2

如果pro3和showcatdiv都在 中maindiv，并且您想pro3在将鼠标悬停在 上时显示showcatdiv，则可以使用 CSS 来实现：

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

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

不需要 JavaScript，尤其是 jQuery。但是，请检查对兄弟选择器的支持。

于 2013-04-30T10:21:53.570 回答
1

pro3 和 showcatdiv 之间没有关系...它们都在一个 div Maindiv 中

如果它们在一个 div 中，请查看您的评论.. 然后使用this参考 get parent 并找到.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-30T10:17:12.517 回答
1

好的，让我们假设div 是这样img的兄弟：pro3

<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();  
});

它依赖于pro3div 作为img.

于 2013-04-30T10:19:34.750 回答