Question

人。我有几个描述的商品。我需要＆＃34; tile-description＆＃34;当我将鼠标悬停在＆＃34;中间瓷砖上时出现＃34;此外，我需要围绕＆＃34;大型瓷砖和＃34;在悬停。这是我用过的标记和一些js，但它对我没用。请帮帮我！

＆＃13;

    $(".middle-tile").mouseover(function(){
  	$(this).parent().siblings().css('opacity', 1);
});
	$(".middle-tile").mouseout(function(){
   	$(this).parent().siblings().css('opacity', 0);
});

＆＃13;

.tile-description{
	position: absolute;
	top: 100%;
	background-color: white;
	z-index: 10;
	opacity: 0;
}

＆＃13;

<div class="large-tile">
    <div class="middle-tile">
        <div class="tile-data"> 
           <div class="tile-img"><a href=""><img src="img/item-2.jpg" alt="" ></a></div>
           <div class="tile-title"><a href="">Title</a></div>
        </div>
           <button class="btn price">3 697</button>
     </div>
     <div class="tile-description">
         <p>Some specs</p>
     </div>
</div>

＆＃13;

Answer 1

使用 find 而不是sibling与parent或 sibling 一起使用{{1}如下所示：

parent

<强> DEMO

或者

$(this).parent().find('.tile-description').css('opacity', 1);

<强> DEMO

Answer 2

只需用作CSS规则：

.middle-tile:hover + .tile-description {
    opacity: 1;
}

在一系列相似的情况下悬停一个div，显示另一个

2 个答案:

-DEMO (using transition btw)