如何使用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？

回答

相关问题