悬停div使标题出现在节上方

Question

我的网站上有不同的部分，当悬停在那些部分（第一篇文章块）时，我希望他们的标题显示在这些部分的顶部，但不是在悬停整个div时，只是块

同样隐藏标题时，它需要空间而不是让我的部分在中间

这是代码

谢谢

＆＃13;

＆＃13;

.first-article {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.first-article-title {
    font-family: Arial, sans-serif;
    font-size: 3em;
    visibility: hidden;
    opacity: 0;
}

.first-article-block {
    height: 50px;
    width: 250px;
    background-color: blue;
}

.first-article-block:hover + .first-article-title {
    visibility: visible;
    opacity: 1;
}

＆＃13;

<div class="container">
   <div class="article col-md-12">
      <div class="first-article col-md-4 col-xs-12">
         <h2 class="first-article-title">My first article</h2>
         <div class="first-article-block">
            <div class="content"> </div>
         </div>
      </div>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

选项1：您可以将隐藏元素放在容器中并使用绝对位置来设置它的位置：

.first-article {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.first-article-title {
    font-family: Arial, sans-serif;
    font-size: 3em;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    margin: 0;
}

.first-article-block {
    height: 50px;
    width: 250px;
    background-color: blue;
    margin-top: 50px;
}

.first-article-block:hover .first-article-title {
    visibility: visible;
    opacity: 1;
}

<div class="container">
   <div class="article col-md-12">
      <div class="first-article col-md-4 col-xs-12">
         <div class="first-article-block">
            <h2 class="first-article-title">My first article</h2>
            <div class="content"> </div>
         </div>
      </div>
   </div>
</div>

选项2：使用javascript：

$(function() {
  $('.first-article-block').hover(function() {
    $('.first-article-title').css({'visibility': 'visible', 'opacity': 1});
  }, function() {
    $('.first-article-title').css({'visibility': 'hidden', 'opacity': 0});
  });
});

.first-article {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.first-article-title {
    font-family: Arial, sans-serif;
    font-size: 3em;
    visibility: hidden;
    opacity: 0;
}

.first-article-block {
    height: 50px;
    width: 250px;
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="article col-md-12">
      <div class="first-article col-md-4 col-xs-12">
         <h2 class="first-article-title">My first article</h2>
         <div class="first-article-block">
            <div class="content"> </div>
         </div>
      </div>
   </div>
</div>

Answer 2

这是代码，不需要jquery或javascript

<div class="container">
        <div class="article col-md-12">
            <div class="first-article col-md-4 col-xs-12">
                <div class="first-article-block">
                    <div class="content">
                    test
                    </div>
                </div>
                <h2 class="first-article-title">My first article</h2>                
            </div>
        </div>
    </div>

CSS

.first-article {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.first-article-title {
    font-family: Arial, sans-serif;
    font-size: 3em;
    visibility: hidden;
    position:absolute;
    opacity: 1;
    padding:0;
    margin:-50px;
}

.first-article-block {
    height: 50px;
    width: 250px;
    background-color: blue;
}

div.first-article-block:hover + h2 {
    visibility: visible;
}

跳这个帮助你

Answer 3

minDate: new Date()早于first-article-title，因此您无法使用CSS选择器来更改html结构或使用JavaScript。 CSS仅向下移动HTML结构，而不是向上。

第一个解决方案是改变HTML和CSS。

将标题放在first-article-block内但在first-article-block之前。

将您为content设置的CSS样式添加到first-article-block。你会得到理想的结果

＆＃13;

＆＃13;

content

＆＃13;

.first-article {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.first-article-title {
    font-family: Arial, sans-serif;
    font-size: 3em;
    visibility: hidden;
    opacity: 0;
}

.first-article-block .content{
    height: 50px;
    width: 250px;
    background-color: blue;
}

.first-article-block:hover .first-article-title {
    visibility: visible;
    opacity: 1;
}

＆＃13;

＆＃13;

＆＃13;