onmouseout事件由onmouseover事件激活的警报框的rid

JavaScript code - onmouseout event rids of alert box activated by onmouseover event

本文关键字：事件 rid 激活 onmouseover onmouseout      更新时间：2023-09-26

请耐心听我说。我是一个自学JavaScript编程的新手。我想知道在这个程序中与onmouseover事件协同工作的onmouseout事件的正确代码。最终的结果是，当鼠标离开onmouseover事件的动作区域时，在html页面上隐藏警告框:

<! DOCTYPE html>
<html>
<head>  
    <title>Product Information</title>
    <script>
    function Product1Info() {
    alert("Summer Product! On sale until Labor Day for $9.99.");
    }
    function Product2Info() {
    alert("One of our best sellers! A bargain at $19.50.");
    }
    function Product3Info() {
    alert("Everyone could use one of these at $1.99!");
    }
    </script>
</head>
<body>
<h1>Fran's Place<br>Shop our inventory!</h1>
We've got everything you need!<br>
<img src ="product1.jpg" height="300px" width="200px"
border="5" style="border-color:blue;" onmouseover="Product1Info()" /></div>
<img src ="product2.jpg" height="300px" width="200px"
border="5" style="border-color:red;" onmouseover="Product2Info()" /></div>
<img src ="product3.jpg" height="300px" width="200px"
border="5" style="border-color:black;" onmouseover="Product3Info()" /></div>
</body>
</html>

你不能用原生警报框做你想做的事情-看这篇文章。

要么构建自己的警报框(例如从div元素)或使用一个库，如bootstrap(例如这个链接)。然后你的onmouseover会显示这个"警告"框，然后onmouseout会关闭这个自定义的警告框。

例如，如果自定义警报框的id = "custom-alert"，则onmouseout将触发一个函数，执行如下操作:

document.getElementById("custom-alert").style.display = 'none';
相关文章：