Question

所以我有这个容器框，我希望左下角的链接在悬停时稍微向上移动，以在下面显示更多，较小的文本！我有一个链接，其中包含我要执行的操作的示例。抱歉，如果某些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;

}

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

这是您想要走向的东西吗？

Answer 2

您使用此代码

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

您可以更改-10px的值

Answer 3

示例网站的处理方式是，他们首先将下面文字的 opacity 设置为 0 ，然后将其负边距这样主体文本和下面的文本可以重叠。但是请记住，由于不透明，因为文本下方的 0 目前不可见。因此，当您悬停主文本时，您可以删除负边距并使不透明度设为下方元素的1 。这是您提供的示例网站正在执行此操作的方式。 不需要JavaScript 。

CSS / HTML文字悬停并显示其他文字

3 个答案: