在悬停问题上更改输入

Change inage on hover issue

本文关键字：输入 悬停 问题      更新时间：2023-09-26

我把这段代码放在另一个页面上，但由于某种原因，当我把它放在一个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>

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

  • img属性name无效 允许的 IMG 属性
  • </img>是无效的 closign 标签，因为img标签位于 Void 元素集中 空元素列表
  • a锚元素不在 Void 元素集中，如果它没有内容，请不要使用 <a /> 如何处理空标签的缩小版本
  • 图像border="0"标记。弃用它。请改用style。
  • 尽量避免使用 HTML 内联javascript方法：它很难维护。将脚本函数保存在一个位置。
  • 尝试预加载所有图像，以防止用户操作出现空白。在您的代码中，第二个图像在以后的请求中调用;如果浏览器尚未缓存，则在加载图像之前，用户看不到任何内容。

你想要的可以在纯CSS中使用: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>

看起来您在 img 元素之后缺少一个 </a> 标签？

此外，正如本所指出的，摆脱你的</img>标签，用/>结束你的<img ...

请尝试清除浏览器缓存，然后重试。它似乎在给出的例子中有效？

相关文章：