Javascript 我的房子坏了

我有个小问题。我在事件的

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' />"; 
  }
}

函数rvrtImg（id）{
警报（id）；
如果（id=“img1”）{
警报（id）
document.getElementById（id.innerHTML=“/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>

jQuery（文档）.ready（函数（$）{
$（'a.paging.image1'）。悬停(
函数（）{$（this.html（“”）；}，
函数（）{$（this.html（“”）；}
);
} );

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

下面是一个工作示例：（注意CSS）

a{
背景：绿色；
}
#img2{
背景：红色；
宽度：300px；
高度：120px；
显示：块；
}

欲了解更多信息：

当锚定具有自动调整大小功能时，它使用字体高度表示高度，使用自动调整大小表示宽度。 让我们考虑一下，在这种情况下，锚的大小大约是100px X 23px 现在，您要在鼠标移出时加载图片。这将改变锚定高度和其中图片的高度，使锚定成为600px 300px。当这件事发生时，鼠标仍然在这个区域（因为它是23像素，但现在是300像素，所以鼠标仍然在那里），所以浏览器再次触发鼠标。和此同时，鼠标悬停在代码上将锚点的高度更改为23px，所以鼠标再次退出，这个循环将永远继续。为了防止这种矛盾，浏览器决定在较小的元素上忽略鼠标移出，然后在较小的元素上忽略鼠标移出。（直到您手动而不是自动执行CSS或更改大小）

---

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

您是否可以复制这一点？为什么不将节点本身传递给函数，而不是

id

，然后用

getElementById（id）

查找元素？没有PHP代码的浏览器输出是什么？@DavidThomas[link]是我的code@Baig您能告诉我们哪个警报正在工作吗？只有第一个，或者两者都有？据我们所知，的值可能会破坏您的函数，但我们甚至无法判断。

<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;
}