Question

当光标悬停在图像上方时，我有一张40Px 40Px的图片，然后图像应该是100px 100px，但要打开慢速左上角到右下角或右上角到左下角。当我将光标移动到图像准确回到原来的位置40px 40px。提前致谢

Answer 1

您也可以不使用CSS3而不是使用javascript来执行此操作。

＆＃13;

.image-placeholder {
    width: 40px;
    height: 40px;
    background: red;
    transition: height 2s, width 2s;
}
.image-placeholder:hover {
    width: 100px;
    height: 100px;
}
.images {
    list-style: none;
    padding: 0px;
}
.images li {
    display: inline-block;
    vertical-align: middle;
}

＆＃13;

<div class="image-placeholder">
    <!-- You could also use the class on image tags -->
</div>

<!-- second example -->
<ul class="images">
    <li class="image-placeholder"></li>
    <li class="image-placeholder"></li>
    <li class="image-placeholder"></li>
</ul>

＆＃13;

Answer 2

您可以使用CSS转换：

img {
    width: 40px;
    height: 40px;
    transition: all 2s;
}
img:hover {
    width: 100px;
    height: 100px;
}

当然是JSFiddle Demo

Answer 3

正如其他人所说，您可以仅使用CSS3来完成此操作，但是如果希望“框”在悬停时保持在原位，那么也可以使用负边距。

在您的示例中，您以40像素开始，然后扩展到100像素。说的是你一个60像素差，你然后分成两半（半对框的每一侧），它给你的30个像素的负幅度。

.wrap {
  position: relative;
}

.box {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: green;
  transition: all 0.5s;
}

.box:hover {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: -30px;
  background-color: blue;
}

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

javascript悬停图片并显示左上角到右下角

3 个答案: