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

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