html - 为什么使用 this.src 时此图像不会在鼠标悬停时发生变化？

Question

我被难住了。我不知道为什么这不会改变鼠标悬停时的图像源...我创建了一个单独的测试页面并且没有问题，但它不适用于我的实际 div 页面...

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';"/>