onmouseout不工作
我有个小问题。我在事件的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
回答 2
Stack Overflow用户
发布于 2013-01-31 03:12:25
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>Stack Overflow用户
发布于 2013-01-31 03:39:21
这是因为图像大于当前锚点的大小。这将阻止鼠标输出正确触发。
下面是一个工作示例：(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，所以鼠标再次退出，这个循环永远不会停止。为了防止这种矛盾，浏览器决定忽略比鼠标移过大小更小的元素的mouseout。(直到您手动执行CSS或更改大小，而不是自动更改)
请注意，如果您将鼠标从元素的上方或左侧移动，请注意鼠标向外移动，因为锚点大小的任何更改都不会影响这两个方向。
https://stackoverflow.com/questions/14611604
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号