html - 在悬停时调整卡片大小会使下面的 div 跳转
问题描述
我.main-partners
在悬停时调整 div 中卡片的大小,以便see more
出现按钮。
我的问题是当我:hover
越过div中的卡片 ( .main-card
) 时,下面一行中的卡片被向下推。.main-partners
divs
.partners
这不是我想要的效果。我希望在调整大小时所有卡片和 div 都保持原位。
我整个上午都在尝试通过来回更改 .css 来解决这个问题。我现在没有希望了。
任何人都可以看看这个,看看我错过了什么。这是一个小提琴的链接
下面是我的代码
.card {
border-radius: 0; }
.card .card-img-top {
border-radius: 0; }
@media (max-width: 767.98px) {
.card {
margin-top: 2vh; } }
.main-partners {
padding: 7px 0 40px; }
.main-partners .row {
margin-left: -8px;
margin-right: -8px; }
.main-partners .row [class^="col-"] {
padding-left: 8px;
padding-right: 8px; }
.main-card {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
border: 1px solid #d5d2d2;
text-decoration: none !important;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
text-align: center;
color: inherit; }
.main-card .card-text {
color: #4b4b4b; }
.main-card .more-link {
margin-left: auto;
margin-right: auto;
font-size: 14px;
line-height: 20px;
font-weight: 500;
height: 0;
overflow: hidden;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
margin-top: -5px; }
.main-card .more-link span {
color: #4b4b4b;
display: block;
padding: 7px 0 3px;
border-top: 1px solid lightgray; }
.main-card .more-link span:before {
content: '+ ';
color: #c2002d;
display: inline-block;
vertical-align: top;
margin-left: 0px;
padding-right: 4px; }
.main-card:hover {
margin: -11px 0px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.main-card:hover .more-link {
height: 31px; }
/* partners */
.partners {
padding: 7px 0 120px; }
.partners .row {
margin-left: -8px;
margin-right: -8px; }
.partners .row [class^="col-"] {
padding-left: 8px;
padding-right: 8px; }
.partners .item {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
border: 1px solid #d5d2d2;
text-decoration: none !important;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
height: 137px;
text-align: center;
color: inherit; }
.partners .item figcaption {
font-size: 16px;
line-height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 2px 10px 8px; }
.partners .item .logo {
height: 50px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center; }
.partners .item .logo img {
display: inline-block;
vertical-align: top;
max-height: 100%;
max-width: 100%; }
.partners .item .logo .text {
display: block;
font-size: 24px;
line-height: 34px;
font-weight: 500;
padding: 14px 0 0; }
.partners .item .more-link {
width: 142px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
line-height: 20px;
font-weight: 500;
height: 0;
overflow: hidden;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
margin-top: -5px; }
.partners .item .more-link span {
display: block;
padding: 7px 0 3px;
border-top: 1px solid lightgray; }
.partners .item .more-link span:before {
content: '+ ';
color: #c2002d;
display: inline-block;
vertical-align: top;
margin-left: -20px;
padding-right: 4px; }
.partners .item:hover {
margin: -11px -8px;
height: 159px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.partners .item:hover .more-link {
height: 31px; }
@media (max-width: 991px) {
.partners {
padding-bottom: 60px; } }
@media (max-width: 767px) {
.partners {
padding-bottom: 40px; } }
@media (max-width: 991px) {
.partners .row [class^="col-"] {
padding-bottom: 16px; } }
@media (max-width: 1219px) {
.partners .item figcaption {
font-size: 14px; } }
@media (max-width: 991px) {
.partners .item figcaption {
font-size: 16px; } }
@media (max-width: 767px) {
.partners .item figcaption {
font-size: 14px; } }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container main-partners">
<div class="row flex-row">
<div class="col-sm-12 col-md-4">
<a href="#" class="main-card">
<div class="card">
<img class="card-img-top" src="#" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
<footer class="more-link">
<span>See more</span>
</footer>
</div>
</div>
</a>
</div>
<div class="col-sm-12 col-md-4">
<a href="#" class="main-card">
<div class="card">
<img class="card-img-top" src="#" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
<footer class="more-link">
<span>See more</span>
</footer>
</div>
</div>
</a>
</div>
<div class="col-sm-12 col-md-4">
<a href="#" class="main-card">
<div class="card">
<img class="card-img-top" src="#" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
<footer class="more-link">
<span>See more</span>
</footer>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="container">
<div class="partners">
<div class="row flex-row">
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
</div>
</div>
<!-- partners -->
<!-- / event-area -->
</div>
解决方案
您需要遵循与 for 相同的.main-partners
模式.partners
。创建一个新的div
并添加.main-partners
它。在 CSS 中.main-partners .card: hover
使用它并且它现在可以工作。这是小提琴链接
推荐阅读
- datetime - 在 SAS 中随时间跨度创建变量
- matlab - 如何将字符串转换为将传递给绘图函数的变量名
- javascript - 与 let 和 var 相比,使用 const 有什么优势?
- excel - 根据标题名称移动列
- python - 如何将具有空值的列转换为日期时间格式?
- javascript - 仅解析必要的 html 数据并跳过不需要的 html 数据
- c# - Visual Studio 文件(XML 或 cs)中的行数限制是多少?
- java - 我可以比较用户的输入而不将其分配给变量吗?
- javascript - 通过 django 模板将 geojson 添加到传单地图
- c# - 如何简化这个 lambda 表达式?