使用鼠标悬停/悬停事件设置隐藏元素的值

Set the value of hidden element with mouseover/hover event

本文关键字：悬停 元素 隐藏 设置 事件 鼠标      更新时间：2023-09-26

我试图让每个mouseoverover事件都有用#id 更新的隐藏值

我的来源：

#html
<li><a href="javascript:void(0)" onmouseover="set_mouseover('1')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('2')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('3')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('4')"></a></li>
...
<input type="hidden" name="mouseover_cell_id" id="mouseover_cell_id" value="">
#code
function set_mouseover(id) {
  jQuery('#mouseover_cell_id').val(id);
}

上面的代码不起作用。知道为什么吗？为什么onmouseover甚至不设置值？

  1. 检查是否包含jquery lib文件
  2. 检查是否在<script>标记中添加了function set_mouseover(id)

function set_mouseover(id) {
  jQuery('#mouseover_cell_id').val(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('1')">1</a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('2')">2</a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('3')">3</a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('4')">4</a></li>
<input type="text" name="mouseover_cell_id" id="mouseover_cell_id" value="">

如果您在控制台错误后仍有问题，

尝试这个

#html
<li><a href="javascript:void(0)" onmouseover="set_mouseover('1')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('2')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('3')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('4')"></a></li>
...
<input type="hidden" name="mouseover_cell_id" id="mouseover_cell_id" value="">
#code
function set_mouseover(id) {
  document.getElementById('mouseover_cell_id').value=id;
}

这将工作，谢谢）：

我建议使用纯JavaScript，如果你不想让锚点标签去任何地方，也可以使用span标签。也可能是因为锚标签中什么都没有，所以它们没有宽度或高度，因此不能悬停在上面。

代码：

<style type="text/css">
    li > span {
        width: 50px;
        Height: 50px;
    }
</style>
<script type="text/javascript">
    function set_mouseover(id) {
        document.getElementById("mouseover_cell_id").value = id;
    }
</script>
<li><span onmouseover="set_mouseover(1);"></span></li>

希望这能有所帮助。

相关文章：