javascript悬停图像并从左上到右下显示答案

【问题标题】：javascript hover image and show left top to bottom rightjavascript悬停图像并从左上到右下显示
【发布时间】：2019-02-01 02:23:29
【问题描述】：

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

【问题讨论】：

请阅读常见问题解答，了解如何发布正确的问题。当您撰写问题时，您会在屏幕上找到它。

标签： javascript jquery css

【解决方案1】：

你可以使用 CSS 过渡：

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

当然还有JSFiddle Demo

【讨论】：

【解决方案2】：

您也可以在不使用 CSS3 而不是 javascript 的情况下执行此操作。

.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;
}

<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>

【讨论】：

好的我明白了，但是你怎么用javascript或jquery从右下角到左下角。例如，当我上课时：$(".amazon").hover(function(){ $( ".amazon a img").toggleClass("amazon_hover"); CSS: .amazon_hover { position: absolute; width: 100px; height: 100px; -moz-transition: height 2s, width 2s; z-index: 10; }
@Marko 我不明白你为什么要用 JQuery 来做这件事。我使用vertical-align: middle 添加了第二个示例。您可以使用 CSS 添加自己的变体。
我知道css或javascript jquery对我很重要，我们可以从左上角到右下角缓慢地打开图像。提前致谢
但是这些解决方案让我水平和垂直打开图像

【解决方案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>

【讨论】：