如何在悬停时显示标题 - css / jquery

Question

如何在悬停时显示标题 - CSS / jquery

我怎样才能让这张卡片无论大小都只在悬停时显示下面的标题？当标题中添加更多单词时，效果不佳。

bottomInfo();
$('.post-item').mouseleave(function(){
    bottomInfo;
});

$('.post-item').mouseenter(function() {
    $('.hero-item .post-info').css('bottom', 0);
});


function bottomInfo() {
    let postInfoHeight = $('.hero-item .post-info').outerHeight(true);
    postInfoHeight = '-' + postInfoHeight + 'px';
    console.log(postInfoHeight);
    $('.hero-item .post-info').css('bottom', postInfoHeight);
}

.hero-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0px 13px 27px -5px rgba(0, 0, 0, 0.25);
  margin-top: 50px;
}
.hero-item::before {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.company-info {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 90%;
}
.company-info__logo {
  width: 100%;
  max-width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50px;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-right: 15px;
}
.company-info h3 {
  color: #fff;
  margin: 0;
  line-height: 24px;
  letter-spacing: 0.38px;
  font-weight: 700;
  font-size: 24px;
}

.item-2 {
  height: auto;
  display: flex;
  flex-flow: column;
  max-width: 338px;
  min-height: 422px;
  max-height: 422px;
  top: -70px;
}
.item-2::before {
  content: "";
  width: 100%;
  height: 60%;
  position: relative;
  background-image: none;
}
.item-2 .post-thumbnail {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: gray;
  min-height: 100%;
  padding-bottom: 125%;
  transition: all 500ms ease-in-out;
}
.item-2 .post-thumbnail::before {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.item-2 .post-info {
  padding: 19px 21px;
  margin-top: auto;
  margin-bottom: 0;
  position: absolute;
  bottom: -140px;
  transition: all 500ms ease-in-out;
  background: white;
  width: 100%;
}
.item-2 .post-info h3 {
  font-weight: 700;
  color: #000;
  line-height: 29px;
  letter-spacing: 0.2px;
  font-size: 24px;
  margin-bottom: 20px;
}
.item-2 .post-info .post-info__arrow-link {
  display: flex;
  align-items: center;
}
.item-2 .post-info .post-info__arrow-link h5 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.38px;
  color: royalblue;
  margin-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}
.item-2 .post-info .post-info__arrow-link:hover h5 {
  text-decoration: underline;
}
.item-2:hover .post-thumbnail {
  padding-bottom: 86%;
}
@media (max-width: 1999px) {
  .item-2:hover .post-thumbnail {
    padding-bottom: 90%;
  }
}
.item-2:hover .post-info {
  bottom: 0;
}

.hero-item-option {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0px 13px 27px -5px rgba(0, 0, 0, 0.25);
  margin-top: 50px;
}
.hero-item-option::before {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.company-info {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 90%;
}
.company-info__logo {
  width: 100%;
  max-width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50px;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-right: 15px;
}
.company-info h3 {
  color: #fff;
  margin: 0;
  line-height: 24px;
  letter-spacing: 0.38px;
  font-weight: 700;
  font-size: 24px;
}

.item-2-option {
  height: auto;
  display: flex;
  flex-flow: column;
  max-width: 338px;
  min-height: 422px;
  max-height: 422px;
  top: -70px;
}
.item-2-option::before {
  content: "";
  width: 100%;
  height: 60%;
  position: relative;
  background-image: none;
}
.item-2-option .post-thumbnail {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: gray;
  min-height: 100%;
  padding-bottom: 125%;
  transition: all 500ms ease-in-out;
}
.item-2-option .post-thumbnail::before {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.item-2-option .post-info {
  padding: 19px 21px;
  margin-top: auto;
  margin-bottom: 0;
  position: absolute;
  bottom: -140px;
  transition: all 500ms ease-in-out;
  background: white;
  width: 100%;
}
.item-2-option .post-info h3 {
  font-weight: 700;
  color: #000;
  line-height: 29px;
  letter-spacing: 0.2px;
  font-size: 24px;
  margin-bottom: 20px;
}
.item-2-option .post-info .post-info__arrow-link {
  display: flex;
  align-items: center;
}
.item-2-option .post-info .post-info__arrow-link h5 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.38px;
  color: royalblue;
  margin-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}
.item-2-option .post-info .post-info__arrow-link:hover h5 {
  text-decoration: underline;
}
.item-2-option:hover .post-thumbnail {
  padding-bottom: 86%;
}
@media (max-width: 1999px) {
  .item-2-option:hover .post-thumbnail {
    padding-bottom: 90%;
  }
}
.item-2-option:hover .post-info {
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero-item item-2 post-item">
    <div class="post-thumbnail" style="background-image: url(https://media-exp1.licdn.com/dms/image/C561BAQFI5wJjW5WlTg/company-background_10000/0?e=2159024400&v=beta&t=SYZsgalRv78KV0nCa9Xf_e5yAL6de8hKAwnHiP5THzU);">
        <div class="company-info">
            <div class="company-info__logo" style="background-color:gray;"></div>
            <h3 style="color: white">My title</h3>
        </div><!--company-info-->
    </div><!--post-thumbnail-->
    <div class="post-info">
        <h3 class="post-title">This is my title post testing for large title of the post and This is my title post testing
</h3>
        <span class="post-info__arrow-link">
            <h5>Read their story</h5>
        </span>
    </div><!--post-info-->
</div>

 <br>

<div class="hero-item-option item-2-option post-item-option">
    <div class="post-thumbnail" style="background-image: url(https://media-exp1.licdn.com/dms/image/C561BAQFI5wJjW5WlTg/company-background_10000/0?e=2159024400&v=beta&t=SYZsgalRv78KV0nCa9Xf_e5yAL6de8hKAwnHiP5THzU);">
        <div class="company-info">
            <div class="company-info__logo" style="background-color:gray;"></div>
            <h3>My title</h3>
        </div><!--company-info-->
    </div><!--post-thumbnail-->
    <div class="post-info">
        <h3 class="post-title">This is my title post testing
</h3>
        <span class="post-info__arrow-link">
            <h5>Read their story</h5>
        </span>
    </div><!--post-info-->
</div>

我试图得到那个 div ** 的高度。 Post-info ** 加上 jquery 然后给它负底，这样当它没有悬停时标题不可见，但是当它是 mouseleave 时标题不再隐藏。
还有标题大的时候，图片不完整，标题盖过了

无论标题大小，它都应该作为第二张卡片。请帮助我！！！

Answer 1

Hopefully it works for you!

我已经删除了英雄项目和 company-info__logo 类并添加了悬停属性。 link 提供对您有帮助的codepen

bottomInfo();
$('.post-item').mouseleave(function(){
    bottomInfo;
});

$('.post-item').mouseenter(function() {
    $('.hero-item .post-info').css('bottom', 0);
});


function bottomInfo() {
    let postInfoHeight = $('.hero-item .post-info').outerHeight(true);
    postInfoHeight = '-' + postInfoHeight + 'px';
    console.log(postInfoHeight);
    $('.hero-item .post-info').css('bottom', postInfoHeight);
}bottomInfo();
$('.post-item').mouseleave(function(){
    bottomInfo;
});

$('.post-item').mouseenter(function() {
    $('.hero-item .post-info').css('bottom', 0);
});


function bottomInfo() {
    let postInfoHeight = $('.hero-item .post-info').outerHeight(true);
    postInfoHeight = '-' + postInfoHeight + 'px';
    console.log(postInfoHeight);
    $('.hero-item .post-info').css('bottom', postInfoHeight);
}

.hero-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
/*   overflow: hidden; */ //Removed
  position: relative;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0px 13px 27px -5px rgba(0, 0, 0, 0.25);
  margin-top: 50px;
}
.hero-item::before {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.company-info {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 90%;
}
.company-info__logo {
  width: 100%;
  max-width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50px;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
/*   overflow: hidden; */ //Removed
  margin-right: 15px;
}
.company-info h3 {
  color: #fff;
  margin: 0;
  line-height: 24px;
  letter-spacing: 0.38px;
  font-weight: 700;
  font-size: 24px;
}

.item-2 {
  height: auto;
  display: flex;
  flex-flow: column;
  max-width: 338px;
  min-height: 422px;
  max-height: 422px;
  top: -70px;
}
.item-2::before {
  content: "";
  width: 100%;
  height: 60%;
  position: relative;
  background-image: none;
}
.item-2 .post-thumbnail {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: gray;
  min-height: 100%;
  padding-bottom: 125%;
  transition: all 500ms ease-in-out;
}
.item-2 .post-thumbnail::before {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.item-2 .post-info {
  padding: 19px 21px;
  margin-top: auto;
  margin-bottom: 0;
  position: absolute;
  bottom: -140px;
  transition: all 500ms ease-in-out;
  background: white;
  width: 100%;
}
.item-2 .post-info h3 {
  font-weight: 700;
  color: #000;
  line-height: 29px;
  letter-spacing: 0.2px;
  font-size: 24px;
  margin-bottom: 20px;
}
.item-2 .post-info .post-info__arrow-link {
  display: flex;
  align-items: center;
}
.item-2 .post-info .post-info__arrow-link h5 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.38px;
  color: royalblue;
  margin-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}
.item-2 .post-info .post-info__arrow-link:hover h5 {
  text-decoration: underline;
}
.item-2:hover .post-thumbnail {
  padding-bottom: 86%;
}
@media (max-width: 1999px) {
  .item-2:hover .post-thumbnail {
    padding-bottom: 90%;
  }
}
.item-2:hover .post-info {
  bottom: 0;
}

.hero-item-option {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0px 13px 27px -5px rgba(0, 0, 0, 0.25);
  margin-top: 50px;
}
.hero-item-option::before {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.company-info {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 90%;
}
.company-info__logo {
  width: 100%;
  max-width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50px;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-right: 15px;
}
.company-info h3 {
  color: #fff;
  margin: 0;
  line-height: 24px;
  letter-spacing: 0.38px;
  font-weight: 700;
  font-size: 24px;
}

.item-2-option {
  height: auto;
  display: flex;
  flex-flow: column;
  max-width: 338px;
  min-height: 422px;
  max-height: 422px;
  top: -70px;
}
.item-2-option::before {
  content: "";
  width: 100%;
  height: 60%;
  position: relative;
  background-image: none;
}
.item-2-option .post-thumbnail {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: gray;
  min-height: 100%;
  padding-bottom: 125%;
  transition: all 500ms ease-in-out;
}
.item-2-option .post-thumbnail::before {
  content: "";
  width: 100%;
  height: 60%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.item-2-option .post-info {
  padding: 19px 21px;
  margin-top: auto;
  margin-bottom: 0;
  position: absolute;
  bottom: -140px;
  transition: all 500ms ease-in-out;
  background: white;
  width: 100%;
}
.item-2-option .post-info h3 {
  font-weight: 700;
  color: #000;
  line-height: 29px;
  letter-spacing: 0.2px;
  font-size: 24px;
  margin-bottom: 20px;
}
.item-2-option .post-info .post-info__arrow-link {
  display: flex;
  align-items: center;
}
.item-2-option .post-info .post-info__arrow-link h5 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.38px;
  color: royalblue;
  margin-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}
.item-2-option .post-info .post-info__arrow-link:hover h5 {
  text-decoration: underline;
}
.item-2-option:hover .post-thumbnail {
  padding-bottom: 86%;
}
@media (max-width: 1999px) {
  .item-2-option:hover .post-thumbnail {
    padding-bottom: 90%;
  }
}
.item-2-option:hover .post-info {
  bottom: 0;
}
/*Added*/
.hero-item {
  position: relative;
  transition: all 0.3s linear;
}
 .hero-item:hover .company-info__logo {
    display: block;
    position: relative;
    margin-top: -177px;
}
 .hero-item .company-info h3:hover {
  display: block;
  position: relative;
  padding-top: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero-item-option item-2-option post-item-option">
    <div class="post-thumbnail" style="background-image: url(https://media-exp1.licdn.com/dms/image/C561BAQFI5wJjW5WlTg/company-background_10000/0?e=2159024400&v=beta&t=SYZsgalRv78KV0nCa9Xf_e5yAL6de8hKAwnHiP5THzU);">
        <div class="company-info">
            <div class="company-info__logo" style="background-color:gray;"></div>
            <h3>My title</h3>
        </div><!--company-info-->
    </div><!--post-thumbnail-->
    <div class="post-info">
        <h3 class="post-title">This is my title post testing
</h3>
        <span class="post-info__arrow-link">
            <h5>Read their story</h5>
        </span>
    </div><!--post-info-->
</div>


 <br>

<div class="hero-item-option item-2-option post-item-option">
    <div class="post-thumbnail" style="background-image: url(https://media-exp1.licdn.com/dms/image/C561BAQFI5wJjW5WlTg/company-background_10000/0?e=2159024400&v=beta&t=SYZsgalRv78KV0nCa9Xf_e5yAL6de8hKAwnHiP5THzU);">
        <div class="company-info">
            <div class="company-info__logo" style="background-color:gray;"></div>
            <h3>My title</h3>
        </div><!--company-info-->
    </div><!--post-thumbnail-->
    <div class="post-info">
        <h3 class="post-title">This is my title post testing
</h3>
        <span class="post-info__arrow-link">
            <h5>Read their story</h5>
        </span>
    </div><!--post-info-->
</div>

如何在悬停时显示标题 - css / jquery

How to show title in hover - css / jquery

javascript

html

jquery

css

jquery-hover