我的目的是使它只有当我在输入的边界内输入鼠标时才能看到img。我看到的问题是代码在chrome（第39版）中的工作方式与在firefox（第35版）中不同。
在firefox和IE中，它按预期工作，但在chrome中，它只在我点击边界内部或外部时触发功能。我尝试使用其他事件，如onmouseenter，onmousemove或onmouseleave，但它们似乎有相同的结果。
我的代码有问题吗？
我有以下代码：
<html>
<body>
<form><table><tr><td><input name="var1" id="var1"></td><td><img name="var1_img" id="var1_img" src="nostar.png" style="display:inline-block; position:relative; left:-20px" onclick="callClickEvent(this)"></td></tr></table></form>
<script>
var statusImg = 0;
function obtenerObj(idName) {
var obj = null;
if (document.getElementsByName && document.getElementsByName(idName)[0]) obj = document.getElementsByName(idName)[0];
else if (document.getElementById && document.getElementById(idName)) obj = document.getElementById(idName);
return obj;
}
function makeVisible(idName) {
console.log("Visible "+idName);
var obj = obtenerObj(idName+"_img");
if (obj) obj.style.display = "inline-block";
}
function makeInvisible(idName) {
console.log("Invisible "+idName);
var obj = obtenerObj(idName+"_img");
if (obj) obj.style.display = "none";
}
function callClickEvent(obj) {
if (obj) {
if (statusImg == 0) {
obj.src = "star.png";
statusImg = 1;
} else {
obj.src = "nostar.png";
statusImg = 0;
}
}
}
var obj = obtenerObj("var1");
if (obj) {
obj.onfocus = function() { makeVisible("var1"); };
obj.onmouseover = function() { makeVisible("var1"); };
obj.onmouseout = function() { makeInvisible("var1"); };
obj.onblur = function() { makeInvisible("var1"); };
}
</script>
</body>
</html>
答案 0 :(得分：0)
如果要在悬停输入时触发事件，则只需要onmouseover和onmouseout事件。 我认为你的问题是由td的高度引起的。 当您显示图像时，td会变大并向下移动，为了防止出现此问题，您可以使用相同的图像高度声明td的高度。
<td style="height:150px;"><input name="var1" id="var1"></td><td><img name="var1_img" id="var1_img" src="http://placehold.it/350x150" style="display:inline-block; position:relative; left:-20px" onclick="callClickEvent(this)"/></td>
试试this工作示例。