为什么使用 this.src 鼠标悬停时此图像不会改变？答案

【问题标题】：Why won't this image change on mouse over using this.src?为什么使用 this.src 鼠标悬停时此图像不会改变？
【发布时间】：2016-09-01 00:21:54
【问题描述】：

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

【问题讨论】：

标签： html css image html-table this

【解决方案1】：

在结束脚本之前添加分号，如下所示，它应该可以工作。

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

【讨论】：

不幸的是没有运气。我想也可能是这样。

【解决方案2】：

如果您的图像未加载或图像尺寸太小而无法识别 mouseover 事件，它也会触发 mouseout 事件。

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

Feedle 显示了相同的工作示例

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

【讨论】：

【解决方案3】：

我实际上不得不补充：

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

让这个工作。

我原以为 Mahesh 是对的，但是当我从 img 中删除 <td> 标签后，它的大小就可以正常工作了。

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

感谢大家的帮助！

【讨论】：