Question

我很难过。我不知道为什么这不会改变鼠标上的图像源...我创建了一个单独的测试页面，这没有问题，但它不能使用我的实际div页面... < / p>

HTML

<div id="nav">
    <div id="nav_left">
        <table class="nav_left">
            <tr><td>
                <img src="arrowdown.png" onmouseover="this.src='arrowdownhover.png'" onmouseout="this.src='arrowdown.png'"/>
            </td></tr>
        </table>

CSS

#nav {
    background-color: #272729;
    width: 99%;
    margin: 0 auto;
    height: 55px;
}

#nav_left {
    width: 30%;
    display: inline-block;
    height: 55px;
}
table.nav_left {
    padding: 0;
    margin: 0;
    border-right: 1px solid black;
    height: 55px;
    width: 10%;
    text-align: center;
    float: left;
    margin-right: 1em;
}

Answer 1

如果未加载图像或图像尺寸太小而无法识别鼠标悬停事件，它也会触发mouseout事件。

您的代码看起来很好，只需为图像添加一些高度和宽度。

Feedle显示了相同

的工作示例

<img style="height:100px; width:100px;" src="arrowdown.png" onmouseover="this.src='arrowdownhover.png';" onmouseout="this.src='arrowdown.png';"/>

Answer 2

在结束脚本之前扔进半冒号，如下所示，它应该可以工作。

<img src="arrowdown.png" onmouseover="this.src='arrowdownhover.png';" onmouseout="this.src='arrowdown.png';"/>

Answer 3

我实际上必须添加：

img {
    position: relative;
    z-index: 1000;
}

让这个工作。

我原以为Mahesh是对的，但是一旦我从img中移除了<td>标签，它的尺寸就完全没问了。

我猜测img就在<td>单元格的后面。 img css是我忘记发布的内容，我没有指定位置。

感谢大家的帮助！

为什么在使用this.src时鼠标上的图像会发生变化？

3 个答案: