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>

我正在尝试在textbox 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;显示：块; 我如何设置动画以使其淡入/淡出？英里

Answer 1

更新回答：

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

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

关于CSS过渡的好文章：https://css-tricks.com/almanac/properties/t/transition/

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

原始答案：

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

看看代码：

＆＃13;

.hidden {
  display: none;
}

.segment:hover .hidden {
  display: block
}

＆＃13;

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

＆＃13;

Answer 2

如果您从不透明度开始，动画应该有效：0并且当您将鼠标悬停在细分上时设置不透明度：1。这是一个例子：

HTML：

<div class = "segment">
  <h1>Hi There!</h1>
  <p class = "hidden">This is hidden</p>
</div>

CSS：

.hidden{
  opacity:0;
  transition: 1s linear;
}

.segment:hover .hidden{
  opacity:1;
}

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

2 个答案: