0

我有一个小问题。我在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

4

2 回答 2

0

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>
于 2013-01-30T19:12:24.803 回答
0

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

这是一个工作示例：（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。当这件事发生时，鼠标仍然在这个区域（因为它超出了 23 像素。但现在它是 300 像素。所以鼠标仍然存在）所以浏览器再次触发鼠标悬停。同时，将鼠标悬停在代码上将锚点的高度更改为 23px，因此鼠标再次退出，此循环将永远进行。为了防止这种悖论，浏览器决定在尺寸较小的元素上忽略鼠标悬停，然后将鼠标悬停在尺寸上。（直到您手动而不是自动执行 CSS 或更改大小）

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

于 2013-01-30T19:39:20.730 回答