Question

请耐心等待。我是一个新的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>

Answer 1

您无法使用原生警报框执行操作 - 请参阅this帖子。

构建自己的警报框（例如来自div元素）或使用诸如bootstrap之类的库（例如this link）。然后，您的onmouseover将显示此“警告”框，然后onmouseout将关闭此自定义警报框。

例如，如果自定义警报框具有id =“custom-alert”，则onmouseout将触发执行以下操作的函数：

document.getElementById("custom-alert").style.display = 'none';

JavaScript代码 - 由onmouseover事件激活的警报框的onmouseout事件rids

1 个答案: