将div悬停在一系列类似的内容中，显示另一个

Question

guys. I have several goods with description. I need "tile-description" appear when I hover over a "middle tile". Besides, I need a border around the "large-tile" on hover. Here is the mark-up and some js that I used, but it didn't work for me. Help me, please!

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

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

 <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> 

Answer 1

Use find instead of sibling when you use with parent or just sibling without parent as below:

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

DEMO

Or

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

DEMO

Answer 2

Just use as CSS rule:

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

-DEMO (using transition btw)