Question

我有一个包含很多行的列div。行项目是动态的，所以我不知道每行会有多少项目。

当我将鼠标悬停在某个项目上时，我想增加该项目的宽度和高度。问题是，当我将鼠标悬停在具有最多项目的行的项目上时，它会将所有内容都按下（我的演示中的最后一行）。

有没有办法解决这个问题而不使用jQuery来查找最大行的高度并将其作为高度添加到选择器类？这可能吗？如果不可能，我可以将物品悬停在物品上方或者使物品低于它降低高度，这样我就不会有这个问题吗？

提前感谢您的回复 PS：悬停时文本也会增加我只是忘了在演示中添加它并不重要。

HTML

 <div class="section columns">
  <div class="column">
    <div class="row">
      <div class="background notransition">  
      </div>
      <div class="borders">    
      </div>
      <div class="score">
        46    
      </div>
      <div class="text">
      Test text 1
      </div>
    </div>  
  </div>
  <div class="column">
    <div class="row">
      <div class="background notransition">  
      </div>
      <div class="borders">       
      </div>
      <div class="score">
        46    
      </div>
      <div class="text">
      Test text 2
      </div>
    </div>
    <div class="row">
      <div class="background notransition">   
      </div>
      <div class="borders">        
      </div>
      <div class="score">
        46    
      </div>
      <div class="text">
      Test text 3
      </div>
    </div> 
  </div>
  <div class="column">  
    <div class="row">
      <div class="background notransition"> 
      </div>
      <div class="borders">   
      </div>
      <div class="score">
        46    
      </div>
      <div class="text">
      Test text 4
      </div>
    </div>
    <div class="row">
      <div class="background notransition">   
      </div>
      <div class="borders">     
      </div>
      <div class="score">
        46    
      </div>
      <div class="text">
      Test text 5
      </div>
    </div>
    <div class="row">
      <div class="background notransition">  
      </div>
      <div class="borders">    
      </div>
      <div class="score">
        46    
      </div>
      <div class="text">
      Test text 6
      </div>
    </div>  
  </div>
</div>
<div>
I don't want this text to move when i hover and height increases
</div>

CSS

.section.columns {
    width: 1340px;
    color:#fff;   
}
.section {
    margin-left: auto;
    margin-right: auto;
    width: 1340px;
    padding-left: 3px;
}
.column {
    display: inline-block;
    width: 180px;
    position: relative;
    vertical-align: top;
    margin-right: 10px;
    font-family: 'Teko',sans-serif;
    padding-bottom: 20px;
}
.column .row:hover {
  width:207px;
  height:40px;


  z-index:1000;
}
.column .row {
    width: 180px;
    height: 35px;
    background-color: #1d1d1d;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #585858;
    border-right: 1px solid #585858;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
}
.column .row:hover .background {
    background-position: center;
    width: 207px;
    height: 40px;
    opacity: .8;
    -webkit-filter: unset;
    -moz-filter: unset;
    -o-filter: unset;
    -ms-filter: unset;
    filter: unset;
}
.column .row .background {
    background-image:url("http://i.imgur.com/wSofTXx.jpg");
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 207px 40px;
    width: 180px;
    z-index: 0;
    opacity: .3;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
}
.notransition {
    -webkit-transition: none!important;
    -moz-transition: none!important;
    -o-transition: none!important;
    -ms-transition: none!important;
    transition: none!important;
}
.column .row .borders {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-left: 4px solid #2887ff;
    border-bottom: 1px solid rgba(0,0,0,.5);
    border-right: 1px solid rgba(0,0,0,.5);
    z-index: 1;

}
.column .row .score {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    line-height: 35px;
    font-size: 1.5em;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    z-index: 5;
    border-left: 1px solid #3e3e3e;
}
.column .row .text {
    z-index: 2;
    width: 180px;
    height: 36px;
    line-height: 35px;
    padding-left: 18px;
    position: absolute;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    word-wrap: break-word;
    font-size: 1.5em;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
}

DEMO

Answer 1

为什么不改变它的规模，而不是改变它的高度。缩放不会影响元素的自然流动，并且所有元素的行为就像目标的大小没有改变一样。

.row {
   transform-origin: 0% 50%;
}
.row:hover {
  transform: scale(1.2);
}

变换原点用于确保元素在缩放时向右移动，而不是向所有方向扩展。

在不知道父高的情况下，在悬停时增加子高度

1 个答案: