CSS/HTML 文本在悬停时移动并显示附加文本答案

【问题标题】：CSS/HTML Text Move on Hover and Display Additional TextCSS/HTML 文本在悬停时移动并显示附加文本
【发布时间】：2018-09-20 19:45:39
【问题描述】：

所以我有这个容器框，我希望左下角的链接在悬停时稍微向上移动，以在下面显示更多、更小的文本！我有一个链接，其中有一个我正在尝试做的例子。抱歉，如果某些 CSS 是一团糟，请重新开始学习，边走边学。我已经彻底研究并寻求答案。即使您可以将我链接到有助于我的页面，我也会非常感激。

Website Here

JSFiddle I have So far

HTML：

<div class ="body_paragraph">
    <div class="body_container">
        <h3><a href="progress">This is the Link</a></h3>
    </div>
</div>

CSS：

.body_paragraph{
    background-color: #222;
    border: 2px solid #111;
    width: 1000px;
    margin: auto;
    margin-top: 50px;
    font-family: Arial;
    font-weight: bold;
    color: #DDDDDD;
    padding: 2px;
    min-height: 500px;

}

.body_container h3{
    font-family: Arial;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    position: absolute;
    bottom: 1px;
    left: 10px;
}

.body_container h3 a{
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.body_container h3 a:hover{
    font-family: Arial;
    font-weight: bold;
    color: #009dff;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.body_container{
    background-color: #333;
    border: 1px solid #111;
    width: 998px;
    font-family: Arial;
    font-weight: bold;
    font-size: 14px;
    color: #DDDDDD;
    min-height: 299px;
    box-shadow: 1px 5px 10px #111;
    position: relative;

}

【问题讨论】：

字体大小不应该是 14px 而不仅仅是 14 吗？
@VarshaDhadge 哈哈是的，感谢您指出这一点！

标签： html css text hover

【解决方案1】：

$(".link").hover(function() {
    	$(".text-info").html("Some texts here.");
    }, function() {
      $(".text-info").html("");
});

.body_container {
  background: tomato;
  display: flex;
  flex-direction: column;
  height: 80px;
}
a {
  padding-top: 30px;
  position: relative;
  display: block;
  transition-duration: 0.5s;
}
a:hover {
  padding-top: 0px;
  transition-duration: 0.4s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class ="body_paragraph">
    <div class="body_container">
        <a href="progress" class="link"><h3>This is the Link</h3></a>
        <div class="text-info"> </div>
    </div>
</div>

这是你想要前进的方向吗？

【讨论】：

是的！这正是我要找的！抱歉，我不知道 JS 最有可能在做我需要的事情！再次感谢！

【解决方案2】：

你用这个代码

.body_container h3 a:hover{ transform: translateY(-10px); display:block; }

你可以改变-10px的值

【讨论】：

我希望左下角的链接稍微向上移动，以便在我将鼠标悬停在它上面时显示更多文本。这样的日期和时间和名称
这非常接近！谢谢你这样做！我一定会把它加入书签，以便以后添加！

【解决方案3】：

您的示例网站的做法是，他们首先将下方文本的不透明度设为0，然后将其设为负边距以便主文本和下面的文本可以重叠。但请记住，由于 不透明度，文本下方的 0 现在将不可见。因此，当您悬停正文时，您可以移除负边距并将不透明度设为下方元素的 1。这就是您提供的示例网站是如何做这件事的。 此操作不需要 javascript。

【讨论】：