Question

当我在本地运行时，它运行正常！但是当我将它上传到我的主机并在线试用时它无效。

这是我正在使用的代码：

<div class="group">
    <div class="left">
                <img src="img/up.png" onmouseover="this.src='img/upscroll.png'"  onmouseout="this.src='img/up.png'"alt="" />

    </div>
    <div class="middle">
                <img src="img/hobo.png" onmouseover="this.src='img/hoboscroll.png'"  onmouseout="this.src='img/hobo.png'"alt="" />
    </div>
    <div class="right">
        <img src="img/blamealcohol.png" onmouseover="this.src='img/blamealcoholscroll.png'"  onmouseout="this.src='img/blamealcohol.png'"alt="" />
    </div>

Answer 1

好的，完全用不同的解决方案编辑答案。

也许这会做你想要的，但比鼠标悬停事件更简单。

以下是演示http://jsfiddle.net/xxhpxd98/

<img class="clock" src="http://images.cdbaby.name/6/0/60x60music2_small.jpg" height="60px" width="60px">
<img class="briefcase" src="http://www.globetrotter1897.com/wp-content/uploads/2013/06/Burgundy-Flight-Bag-and-Small-Brief-60x60.jpg">

.clock {
    position:absolute;
    z-index:2;
}

.clock:hover {
    opacity:0

}

.briefcase {
    position:absolute;
}

Answer 2

如果悬停图像的路径正确，那么问题就是其他问题。通常在加载页面时，它会加载第一个视图中存在的所有内容。即它不会加载任何放在javascript事件中的图像，例如onmouseover。只有在您执行操作（即鼠标悬停）时，鼠标悬停图像才会开始加载。有时如果没有缓存悬停图像或者无法从服务器获取图像，它可能会失败。

有不同的方法可以解决这个问题。

以下是两个：

1）第一种方法：你应该使用javascript

预加载悬停图像

var image1=new Image();
image1.src="img/upscroll.png";

通过这种方法，图像upscroll.png将被缓存，因此您的代码可以正常工作。

2）第二种方法：在页面中包含所有悬停图像，并将其宽度和高度设置为1像素，这样任何人都不会看到它，但图像将被预加载。如果需要，您可以将这些点的位置更改为固定，并将其保持在屏幕左侧：-10px或类似的位置。

这不仅可以使代码正常工作，而且还可以避免在鼠标结束时加载图像的奇怪外观，因为它已经被缓存了。

鼠标悬停后图像发生变化，无法正常工作

2 个答案: