Flex包装悬停CSS问题。悬停制作.li狂野

时间：2017-10-30 14:27:43

标签： html css css3 flexbox

我有一个灵活列表，我已经管理了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中缺少什么来解决这个问题？

2 个答案:

答案 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，以便悬停的项目保持在最顶层。

Updated codepen

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与原始版本相比有所更新。

Updated codepen 2

相关问题
最新问题