如何在文本上添加懸停效果

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

將class .appear添加到要懸停在.box上的任何.box 。

JS小提琴