悬停元素A，显示/隐藏元素B. [英] hover element A, show/hide Element B

问题描述

我有一个包含图片的< div> 元素。在那个div里面，我有一个< p> 元素，它包含关于图像的一些信息。我想悬停包含图片的< div> ，然后显示或隐藏< p> 元素。

 < div class =box> 
< img src =img / an_039_AN_diskette.jpgwidth =310pxheight =465px/> 
 6 Pharma IT 
< p class =hoverbox>一些信息< / p> 
< / div> 
  

在jQuery中有一种简单的方法吗？

<$ p $

p> < script type =text / javascript>
$（document）.ready（function（）{
$（div.box img）。hover（
function（）{$（this）.siblings（p：first ）.show（）;}，
function（）{$（this）.siblings（p：first）。hide（）;}
）;
}）;
< / script>

< div class =box>
< img src =somefile.jpg/>
< p>这段文字将会切换。< / p>
< / div>


I have a <div> element containing an image. Inside that div, I have a <p> element which holds some information about the image. I want to hover the <div> containing the image and then show or hide the <p> element.

<div class="box">
    <img src="img/an_039_AN_diskette.jpg" width="310px" height="465px" />
    6 Pharma IT
    <p class="hoverbox">some information</p>
</div>

Is there an easy way to do so in jQuery?

解决方案

The following will match all of your images, and target their first sibling having the tag P.

<script type="text/javascript">
$(document).ready(function(){
    $("div.box img").hover(
      function(){$(this).siblings("p:first").show();},
      function(){$(this).siblings("p:first").hide();}
    );
});
</script>

<div class="box">
  <img src="somefile.jpg" />
  <p>This text will toggle.</p>
</div>

这篇关于悬停元素A，显示/隐藏元素B.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！