动画：如何影响 mouseOver() 图像

Question

在下面的代码中，我能够对 image/gif 进行更改，我通过 CSS 获得了源代码，使其具有特定的大小或形状。但是，我无法对鼠标悬停时显示的图像进行任何更改。它给了我默认的大小和形状。我也需要知道一种方法来对其进行更改

<a class="newimg" href="C:\Users\Ak.Dell-PC\Desktop\Sublime Text 3\A.html" target="_blank">
    <img src="C:\Users\Ak.Dell-PC\Desktop\Sublime Text 3\img10-Flowers-In-The-Wind.gif"  alt="Visit new page!" border="1" name="flowers" onmouseover="mouseOver()" onmouseout="mouseOut()"> 
</a>

a.newimg{
    height: 300px;
    width: 300px;
    border: 1px solid orange;   
}

function mouseOver() {
    document.flowers.src="C:/Users/Ak.Dell-PC/Desktop/Sublime Text 3/img/IMG-20190112-WA0010.jpg";
}

function mouseOut() {
    document.flowers.src="C:/Users/Ak.Dell-PC/Desktop/Sublime Text 3/img/9610-Flowers-In-The-Wind.gif";

Answer 1

使用 css :hover 这样您就可以改变它们的样式。

function mouseOver() {
  document.flowers.src = "http://placekitten.com/100/100";
}

function mouseOut() {
  document.flowers.src = "http://placekitten.com/200/300";
}

a.newimg img {
  height: 300px;
  width: 300px;
  border: 1px solid orange;
}

a.newimg:hover img {
  border-radius: 50%;
}

<a class="newimg" href="#" target="_blank">
  <img src="http://placekitten.com/200/300" alt="Visit new page!" border="1" name="flowers" onmouseover="mouseOver()" onmouseout="mouseOut()">
</a>

并且在没有任何改变图像的情况下JavaScript

a.newimg img {
  height: 300px;
  width: 300px;
  border: 1px solid orange;
}

a.newimg img:first-child {
  display: inline;
}

a.newimg img:last-child {
  display: none;
  border-radius: 50%;
}

a.newimg:hover img:first-child {
  display: none;
}

a.newimg:hover img:last-child {
  display: block;
  border-radius: 50%;
}

<a class="newimg" href="#" target="_blank">
  <img src="http://placekitten.com/200/300" alt="Visit new page!" border="1" name="flowers">
  <img src="http://placekitten.com/100/100" alt="Visit new page!" border="1" name="flowers">
</a>

Answer 2

您已经在 JS 中定义了函数，但是您还没有在 Javascript 脚本中添加任何事件侦听器。您需要添加document.getElementById('img').addEventListener()，然后传递您要调用的事件和相应的函数。

您可以按如下方式进行-

function mouseOver() {
  document.flowers.src = "https://live.staticflickr.com/2912/13981352255_fc59cfdba2_b.jpg";
}

function mouseOut() {
  document.flowers.src = "https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg";
}

document.getElementById('img').addEventListener('mouseOver', mouseOver)

document.getElementById('img').addEventListener('mouseOut', mouseOut)

a.newimg {
  height: 300px;
  width: 300px;
  border: 1px solid orange;
}

<a class="newimg" href="C:\Users\Ak.Dell-PC\Desktop\Sublime Text 3\A.html" target="_blank">
  <img id='img' src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg" alt="Visit new page!" border="1" name="flowers" onmouseover="mouseOver()" onmouseout="mouseOut()">
</a>

我已经更改了演示的图像 URL，但您知道如何操作的要点。您已经正确定义了函数，只是没有将它们与 eventListeners

绑定

动画：如何影响 mouseOver() 图像

Animation: How to affect the mouseOver() image

html

javascript

css

onmouseover