javascript - 使用jQuery为同一类的不同div中的特定元素添加悬停效果

Question

我有一个图像网格，所有图像都具有相同的类(当您将鼠标悬停在图像上时，我想切换它。这些图像是从 mongo 数据库中提取的。

这是我的 HTML(使用 ejs 执行循环遍历数据库中所有图像的逻辑)

 <div class="ui two column padded stackable center aligned grid">
  <% videos.forEach(function(video){ %>
    <div class="column">
      <div class="ui fluid inverted segment">
        <img class="ui rounded image" src="<%= video.thumbnail %>" href="/videos/<%= video._id %>">
        <div class="textbox hidden">
          <div class="description"><%= video.description %></div>
        </div> 
      </div>
    </div>
  <% }); %>
</div>

我正在尝试切换文本框 div 上的隐藏类，因此文本从底部弹出(也使用语义 UI 进行某些样式设置)

这是我的 jQuery

$(".image").hover(function(){
$(".textbox").removeClass("hidden");
}, function(){
$(".textbox").addClass("hidden")

});

here is an image of the sort of thing I want to achieve (only different the text appears when you hover on the image)

谢谢英里

编辑:下面的答案非常有效，但我想为悬停效果设置动画，目前它只是从 display: none;显示: block ；我如何制作动画以使其淡入/淡出？英里

Answer 1

更新的答案:

在动画的同时显示和隐藏文本可以使用不同的方法来实现，您可以通过这种方法在悬停时更改文本的边距并附加您选择的动画效果。

对于淡入/淡出动画，请参阅@Kris 的答案，它使用不透明度而不是边距。

关于 CSS 转换的好文章:https://css-tricks.com/almanac/properties/t/transition/

.segment {
  position: relative;
}

.segment img.image {  
  position: relative;
  z-index: 10;
}

.segment .textbox.hidden {
  position: relative;  
  z-index: 5;
  transition: ease-out 0.5s;
  margin-top: -30px;
}

.segment:hover .textbox.hidden {  
  margin-top: 0;
}

<div class="ui two column padded stackable center aligned grid"> 
    <div class="column">
      <div class="ui fluid inverted segment">
        <img class="ui rounded image" src="http://www.skrenta.com/images/stackoverflow.jpg" href="/videos/<%= video._id %>">
        <div class="textbox hidden">
          <div class="description">Video Description</div>
        </div> 
      </div>
    </div>
</div>

原答案:

您不需要 JavaScript 或 jQuery 来实现这一点。它可以单独使用 CSS 来完成。默认情况下可以隐藏文本，然后您可以定义一个规则，在父悬停时显示子文本。

看一下代码:

.hidden {
  display: none;
}

.segment:hover .hidden {
  display: block
}

<div class="ui two column padded stackable center aligned grid"> 
    <div class="column">
      <div class="ui fluid inverted segment">
        <img class="ui rounded image" src="http://www.skrenta.com/images/stackoverflow.jpg" href="/videos/<%= video._id %>">
        <div class="textbox hidden">
          <div class="description">Video Description</div>
        </div> 
      </div>
    </div>
</div>