Question

我有点问题。我在活动的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

Answer 1

这是因为图像大于锚的当前大小。这样可以防止鼠标无法正常触发。

这是一个工作示例:(注意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或手动改变大小而不是自动改变大小）

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

Answer 2

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>

onmouseout不工作

2 个答案: