我有一个灵活列表,我已经管理了4x4行,因为我总共要添加16个地点。
https://codepen.io/SteveGWR/pen/NaZJyp
<div class="container">
<ul class="grid-list">
<li class="bath">
<div class="destination-title">Bath</div>
<div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="bristol">
<div class="destination-title">Bristol</div>
<div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cardiff">
<div class="destination-title">Cardiff</div>
<div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cornwall">
<div class="destination-title">Cornwall</div>
<div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="dorset">
<div class="destination-title">Dorset</div>
<div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Cotswolds">
<div class="destination-title">Cotswolds</div>
<div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Exeter">
<div class="destination-title">Exeter</div>
<div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="London">
<div class="destination-title">London</div>
<div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
</div>
问题是当你将鼠标悬停时,它就会疯狂。
我在CSS中缺少什么来解决这个问题?
答案 0 :(得分:1)
尝试使用scale
而不是更改宽度。这不会影响其他元素。像这样制作.grid-list li:hover
的CSS:
.grid-list li:hover {
position:relative;
transform: scaleX(1.5);
max-width: 380px;
height: 150%;
z-index: 99;
overflow: auto;
}
答案 1 :(得分:0)
由于flex-wrap: wrap
让它们变得狂野,所以将它们按4分组并删除包装。
我还添加了z-index
,以便悬停的项目保持在最顶层。
Stack snippet
* {
margin:0px;
padding:0px;
box-sizing:border-box;
}
.container {
position: absolute;
left: 50%;
margin-left: -475px;
background: #FF4346;
max-width: 950px;
width: 100%;
top: 10px;
height: 748px;
}
.grid-list {
display: flex;
flex-direction: row;
justify-content: space-evenly;
height: 230px;
}
.col {
flex: 1;
}
.grid-list .col {
width: 32%;
}
.grid-list li {
position:relative;
height:100%;
}
.destination-copy {
display:none;
opacity:0;
transition:1s all;
position:absolute;
bottom:0px;
width:100%;
background:rgba(0,0,0,0.7);
color:#fff;
padding:12px;
font-size: 13px;
font-family: arial;
}
.grid-list li:hover .destination-copy {
animation: 1s ease 0s normal forwards 1 fadein;
display:block;
}
@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
.grid-list li {
transition: width 0.5s, height 0.5s;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 25%; /*CHANGE*/
/* min-width: 237px; */
/* margin: 1em; */
/* flex-wrap: wrap; */
list-style: none;
}
.grid-list li:hover {
width:200%;
height:150%;
z-index: 10;
}
.destination-title {
position:absolute;
bottom:80px;
right:0px;
background-color:#054940;
color:#fff;
font-size:16px;
padding:6px;
width: 100px;
text-align: center;
}
/* Background images */
.bath {
background-image:url(http://placekitten.com/600/350);
}
.bath:hover {
background-image: url(http://placekitten.com/600/350);
}
.bristol {
background-image: url(http://placekitten.com/600/355);
}
.bristol:hover {
background-image: url(http://placekitten.com/600/355);
}
.cardiff {
background-image:url(http://placekitten.com/600/356);
}
.cardiff:hover {
background-image:url(http://placekitten.com/600/356);
}
.cornwall {
background-image:url(http://placekitten.com/600/357);
clear: right;
}
.cornwall:hover {
background-image:url(http://placekitten.com/600/357);
}
.dorset {
background-image:url(http://placekitten.com/600/359);
clear: left;
}
.dorset:hover {
background-image:url(http://placekitten.com/600/359);
}
.Cotswolds {
background-image:url(http://placekitten.com/600/365);
clear: left;
}
.Cotswolds:hover {
background-image:url(http://placekitten.com/600/365);
}
.Exeter {
background-image:url(http://placekitten.com/600/366);
clear: left;
}
.Exeter:hover {
background-image:url(http://placekitten.com/600/366);
}
.London {
background-image:url(http://placekitten.com/600/367);
clear: left;
}
.London:hover {
background-image:url(http://placekitten.com/600/367);
}
<div class="container">
<ul class="grid-list">
<li class="bath">
<div class="destination-title">Bath</div>
<div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="bristol">
<div class="destination-title">Bristol</div>
<div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cardiff">
<div class="destination-title">Cardiff</div>
<div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cornwall">
<div class="destination-title">Cornwall</div>
<div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
<ul class="grid-list">
<li class="dorset">
<div class="destination-title">Dorset</div>
<div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Cotswolds">
<div class="destination-title">Cotswolds</div>
<div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Exeter">
<div class="destination-title">Exeter</div>
<div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="London">
<div class="destination-title">London</div>
<div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
</div>
根据评论进行更新,在调整图片大小时,下方的行不会被按下。
将height: 190px
从.grid-list
移至.grid-list li
,然后将.grid-list li:hover
更改为height: 270px;
(190px的150%),下面的行将会向下移动
请注意,此处的codepen与原始版本相比有所更新。