鼠标输出不起作用

onmouseout not working

本文关键字：不起作用 输出 鼠标      更新时间：2023-09-26

我有一点问题。我正在onmouseout事件的事件上调用一个函数，它工作正常，但它没有改变innerHTML。以下是我的函数：

function rvrtImg(id) {
  alert(id);
  if(id=="img1") {
    alert(id)
    document.getElementById(id).innerHTML = "<img src='<?php echo     
        get_bloginfo('template_directory')?>/img/paging/1.png' />"; 
  }
}

在这里，我称之为

<a href="#"  id="img1" onmouseover="repImg(this.id)" onmouseout="rvrtImg(this.id)">hello</a>

只有警报有效，但它不会更改内部HTML

WordPress？

<a href="#" id="img1" class="paging image1">hello</a>

您可以使用jQuery来处理鼠标悬停/悬停：

<script type="text/javascript">
jQuery( document ).ready( function( $ ) {
    $( 'a.paging.image1' ).hover(
        function() { $( this ).html( '<img src="hoverimage1.png" alt="" />' ); },
        function() { $( this ).html( '<img src="normalimage1.png" alt="" />' ); }
     );
} );
</script>

这是因为图像大于当前锚点的大小。这将阻止鼠标输出正确触发。

这是一个工作示例：（CSS注意）http://jsfiddle.net/QQSLC/16/

<a href="#" id="img1" onmouseover="repImg(this.id)" onmouseout="rvrtImg(this.id)">hello with lower size than image</a>
<a href="#" id="img2" onmouseover="repImg(this.id)" onmouseout="rvrtImg(this.id)">hello with higher size than image</a>
a {
    background: green;
}
#img2{
    background: red;
    width: 300px;
    height: 120px;
    display: block;
}

仅供参考：

当您有一个具有自动大小的锚点时，它使用字体高度作为高度，自动调整宽度。让我们假设在这种情况下，我们的锚点的大小约为 100px X 23px现在，您想在鼠标输出时加载图片。这将随着其中图片的高度而改变锚点高度，因此锚点变为 600px X 300px。当这件事发生时，鼠标仍然在这个区域（因为它超出了 23px。但现在是300px。所以鼠标仍然存在），因此浏览器再次触发鼠标悬停。同时，将鼠标悬停在代码上将锚点的高度更改为 23px，因此鼠标再次出现，并且此循环将永远持续。为了防止这种悖论，浏览器决定忽略较小尺寸的元素的鼠标退出，然后将鼠标悬停在大小上。（直到您手动执行CSS或更改大小而不是自动更改）

请注意，如果您从元素上方或左侧移动鼠标，则鼠标退出工作，因为锚点大小的任何变化对这两个方向都没有影响。

相关文章：