Question

我将此代码放在另一个页面上，但出于某种原因，当我将它放在div或它自己的代码中时，代码将无效，我无法显示我的翻转图像。

这是我的代码

<div id="container4">
    <a href='bird3.html' onmouseover="document.photo.src='next2.png';" onmouseout="document.photo.src='next.png';">        
    <img src="next.png" name="photo" border="0"> </img>
</div>

Answer 1

这么小的代码，这么多问题：这里是一个列表

img属性name无效^{Allowed IMG Attributes}
</img>是一个无效的closign标记，因为img标记位于无效元素 ^{List of Void Elements}
a anchor元素不在 Void元素的集合中，如果没有内容，请不要使用<a />的缩小版 ^{How to handle empty tags}
图片border="0"标记。 弃用。改为使用style。
尽量避免使用HTML内联javascript方法：它很难维护。 将您的脚本功能集中在一个地方。
尝试预加载所有图片以防止用户操作出现空白。在您的代码中，第二个图像在稍后的请求中被调用;如果尚未被浏览器缓存，则用户在加载图像之前什么都看不到。

您希望 使用:hover伪选择器

div[id^=container] a + img + img { display:none; } /*hide second image*/ div[id^=container] a:hover + img + img { display:inline; } /*show second image*/ div[id^=container] a:hover + img { display:none; } /*hide first image*/

<div id="container4"> <a href='bird3.html'>hover me</a> <img src="http://placehold.it/40x40/ccc"> <img src="http://placehold.it/40x40/cf5"> </div>

Answer 2

看起来你错过了img元素之后的</a>标签？

此外，正如本指出的那样，摆脱你的</img>标记，然后用<img ...

结束你的/>

尝试清除浏览器缓存，然后重试。它似乎适用于给出的例子？

在悬停问题上更改图像

2 个答案: