javascript - 如何为文本添加悬停效果

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