Question

所以我正在这个网站上工作http://wiafe.github.io/Love-Nonprofits/index.html，在底部附近有一些包含消息的div。我想添加一个悬停效果，它将显示两个按钮和一个链接。我所尝试的一切都失败了，所以检查是否有办法做到这一点。我拿出了我的html部分并保留了css类。一整天都搞乱了它，现在它正在打破我的大脑。

HTML：

<div class="message">
    <a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,<br><span class="signature">Leaslie S.</span>

    </a>

    <a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. <br><span class="signature">Leaslie S.</span>

    </a>    

</div>

CSS：

.message-content:hover {
  text-decoration: none;
}
.message-content p {
  color: rgba(255,255,255,1);
  background: black;
  background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  padding: 10px;
  line-height: 28px;
  text-align: justify;
  position: relative;
  bottom: 0;
  margin: 0;
  height: 30px;
  transition: height .5s;
  -webkit-transition: height .5s;
  -moz-transition: height .5s;
}

.message-content:hover small {
  opacity: 0;
}

.message-content:hover .show-description p {
  height: 100%;
}

.message-content .show-description small {
  opacity: 1;
}

JS：

$('.message-content').hover(function() {
    $(this).toggleClass('show-description');
});

Answer 1

使用此CSS：

.box > .appear {
    opacity: 0;
    transition: all 0.5s;
}

.box:hover > .appear {
    opacity: 1;
}

将小组.appear添加到您想要在.box上方悬停时显示的内容。

JS Fiddle

如何使用文本添加悬停效果

1 个答案: