Question

当鼠标翻过来我想放大工作箱。我用css制作了它，但是当盒子放大时，底线会变成底线。

我想像fiverr.com一样。在fiverr中，当框放大时，底线不会影响，也会显示用户名。我该怎么做？ CSS，jQuery或Javascript。谢谢你的帮助

https://www.fiverr.com/categories/online-marketing/#layout=auto&page=1

我的代码：

的style.css

#box {margin-top:31px; padding:1px;margin-left:30px; height:234px;float:left;width:218px;background-color:#fff;box-shadow: 0 0 3px;
-webkit-transition-property: height; 
-webkit-transition-timing-function;
ease-in;
-webkit-transition-duration:0.1s;
-webkit-transition-delay:0.0s; 
}

#box img{width:218; height;147px;}

#box:hover {
    height: 254px;}

PHP

 echo'<div id="box"><img src='.$categ2.' style=color:#555555>'.$categ1.'</a></div>';

Answer 1

好的，如果你在你提供的网站上注意到，当你将鼠标悬停在某个项目上时会发生其他一些事情：

boxy项目本身不会增加它的高度，而是它有一个固定的高度（它是相同的w / hover）和一个溢出：隐藏应用于它
和一个内部包装器（改变其高度），它包含两个子div，一个是可见的，一个是隐藏的。
在悬停上方的boxy项目，内部包装器将其高度更改为更大的高度以显示内部隐藏的div子项
你徘徊的那个下方的四四方方的物品会被一些上边距推动，如果你有一个固定的网格尺寸，你可以通过css复制，通过一些n-child规则，但不是全宽网格，而不是无论如何只有css，你需要一些js才能做到这一点

但是，如果您只想将您的线条悬停在某个项目上时保持原样，您可以:(有更多解决方案，但首先会想到这些解决方案）

解决方案1 
将你的盒子div的内容包装在另一个包装器内，并在悬停时使用内包装器的高度进行播放（参见demo）

*,
*:after,
*:before {
  box-sizing: border-box;
}
#main {
  padding: 20px;
}
.box {
  width: 218px;
  height: 257px;
  /*set the outer parent height to match the height of initial content + hidden content + some margin push*/
  overflow: hidden;
  float: left;
  margin-top: 0;
  margin-left: 30px;
  padding: 1px;
  transition: all .2s ease-in-out;
}
.inner-box-content {
  height: 230px;
  background-color: #fff;
  box-shadow: 0 0 3px;
  transition: all .2s ease-in-out;
}
.initial-content {
  height: 220px;
}
.hovered-content {
  opacity: 0;
  height: 30px;
  background: cyan;
  transition: all .2s ease-in-out;
}
.box:hover .inner-box-content {
  height: 250px;
  /*show the hidden div: add up the initial-content height + hovered-content height*/
}
.box:hover .hovered-content {
  opacity: 1;
}

<div id='main'>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
  <div class='box'>
    <div class='inner-box-content'>
      <div class='initial-content'>
        Just your regular css box here
      </div>
      <div class='hovered-content'>
        A sneaky content over here!
      </div>
    </div>
  </div>
</div>

或

解决方案2

你可以使用负底边距值，隐藏内容的高度，悬停时，像这样（见demo）

.box { margin-top: 31px; padding: 1px; margin-left: 30px; height: 234px; float: left; width: 218px; background-color: #fff; box-shadow: 0 0 3px; /* -webkit-transition-property: height; */ /* -webkit-transition-duration: 0.1s; */ /* -webkit-transition-delay: 0.0s; */ transition: all .2s ease-in-out; } .box:hover { height: 254px; /*add increased height difference by 20px*/ margin-bottom: -20px; /*a negative value meaning the height of your inner content or some increased height difference*/ }

<div id='main'> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> <div class='box'> A box </div> </div>

希望这有帮助！

Answer 2

虽然这不是完整的答案，但您可能需要查看它： http://jsfiddle.net/7qoxh0sw/

HTML：

<div class="box">
    <h1>1</h1>
    <div>"user details"</div>
</div>

<div class="box">
    <h1>2</h1>
    <div>"user details"</div>
</div>

<div class="box">
    <h1>3</h1>
    <div>"user details"</div>
</div>

<div class="box">
    <h1>4</h1>
    <div>"user details"</div>
</div>

<div class="box">
    <h1>5</h1>
    <div>"user details"</div>
</div>

<div class="box">
    <h1>6</h1>
    <div>"user details"</div>
</div>

<div class="box">
    <h1>7</h1>
    <div>"user details"</div>
</div>

CSS

.box{
    /*important css*/
    height: 150px;
    width: 100px;
    display: inline-block;
    transition: margin 1s;
    position: relative;
    margin: 10px;

    /*useless css - used only for visuals*/
    background: #aaa;
    color: white;
    text-align: center;
}

.box div{
    /*important css*/
    display: block;
    height: 0px;
    position: absolute;
    top: 100%;
    transition: height 1s;
    width: 100%;

    /*useless css - used only for visuals*/
    background: red;
    text-align: center;
}
.box:hover{
    /*60px because 50px(from next css rule) + 10px(from margin in `.box` rules)*/
    margin-bottom: 60px;
}
.box:hover div{
    height: 50px;
}

这应该为您提供有关实现您所需效果的CSS的基本概念。您需要做的就是将您的html更改为类似的格式，其中用户详细信息是具有绝对位置的div class="box"的子div。休息只是在盒子div上悬停的css效果。

当鼠标翻过来时，Div会放大

2 个答案: