javascript - 鼠标经过时div放大

Question

我的网站:http://acamate.com/a/index.php

我想在鼠标过来时放大作业框。我是用 css 做的，但是当框变大时，底线会转到底线。

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

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

我的代码:

样式.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

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

• 四四方方的元素本身不会增加它的高度，但它有一个固定的高度(它与悬停相同)和一个 overflow:hidden 应用于它
• 和一个内部包装器(改变它的高度)，它包含两个子 div，一个是可见的，一个是隐藏的。
• 将悬停在方形元素上时，内部包装器将其高度更改为更大的高度以显示隐藏在内部的 div 子项
• 你悬停的那个下面的四四方方的元素被一些顶部边缘插入，你只能通过 css 复制，通过一些 nth-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>

希望这对您有所帮助!