Question

所以，我目前有一个400x400像素的图像。当外部缩放到200x200时，它看起来像素化。因此，我将其添加到Wordpress为400x400，但按比例缩小，如下所示：

但是，我现在正尝试使用缩小的图像添加onmouseover事件。

它适用于普通图像，如下所示：

https：//y.png'“onmouseout =”this.src ='https://x.png'“/＆gt;

但是，如果我尝试缩放图像，如下所示，它不起作用：

https：//y.png'width =“200”height =“200”“onmouseout =”this.src ='https://x.png'“/＆gt;

请注意我已将图像的来源删除，并替换为“x”和“y”。

有人知道如何解决这个问题吗？

谢谢大家。

Answer 1

您应该能够在没有JavaScript的情况下完成此任务。

以下是Codepen演示：http://codepen.io/hellojason/pen/GZjpQE

在CSS中：

＆＃13;

img {
  width: 200px;
  transition: width 1s;
}

img:hover, img:focus {
  width: 400px;
}

＆＃13;

<img src="http://placehold.it/400x400" />

＆＃13;

这是你之后的事吗？

Answer 2

此任务有两种方法可以使用

使用Javascript的第一种方式。

脚本：

function bigImg(x) {
    x.style.height = "400px";
    x.style.width = "400px";
}

function normalImg(x) {
    x.style.height = "200px";
    x.style.width = "200px";
}

Html：

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://placehold.it/400x400" alt="Smiley" width="32" height="32">

您可以从onmouseover或onmouseout函数调用自己的函数。

使用CSS的第二种方式：

CSS：

#image{
width:200px;
height:200px;
}

#image:hover{
width:400px;
height:400px;
}

Html：

<img border="0" src="http://placehold.it/400x400" alt="Smiley" id="image">

Answer 3

您可以使用：before伪选择器来显示背景图像。这样可以缩小CSS中的400x400图像。运行此命令并将鼠标悬停在元素上。

＆＃13;

.item {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.item:hover:before {
  content: "";
  background-image: url(http://placehold.it/400x400);
  background-size: 200px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<a href="#" class="item">
  <img src="http://placehold.it/200x200/8B0AB3/ffffff" />  
</a>

＆＃13;

将width =“200”height =“200”添加到onmouseover

3 个答案: