微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

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

如何在悬停时显示标题 - 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.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.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,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.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,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,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>

  1. 我试图获得那个 div 的高度 **。使用 jquery 发布信息 ** 然后给它负底，这样标题在没有悬停时不可见，但是当它是 mouseleave 时，标题不再隐藏。

  2. 也是当标题很大时，图像不完整，标题就在上面。

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

解决方法

Hopefully it works for you!

我已经删除了 hero-item 和 company-info__logo 类并添加了悬停属性。提供的链接可以帮助您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',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.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.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,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.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,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,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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot