首页用html写个按钮，鼠标放在按钮上时，在按钮的旁边出现弹窗，弹窗内展示多个文本，文本纵向排列，其中一个文本的文字颜色为红色，鼠标移开弹窗消失

用html写个按钮，鼠标放在按钮上时，在按钮的旁边出现弹窗，弹窗内展示多个文本，文本纵向排列，其中一个文本的文字颜色为红色，鼠标移开弹窗消失

时间: 2024-03-03 10:49:21 浏览: 129

好的，下面是代码： ```html <!DOCTYPE html> <html> <head> <title>Button with Popup</title> <style> .popup { display: none; position: absolute; background-color: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1; } .popup p { color: #000; margin: 0; padding: 5px 0; font-size: 14px; } .popup p.red { color: #f00; } </style> </head> <body> <button onmouseover="showPopup()" onmouseout="hidePopup()">Hover me</button> <div class="popup" id="popup"> <p>This is some text.</p> <p>This is some more text.</p> <p class="red">This is some red text.</p> </div> <script> function showPopup() { document.getElementById("popup").style.display = "block"; } function hidePopup() { document.getElementById("popup").style.display = "none"; } </script> </body> </html> ``` 解释一下： - `onmouseover` 和 `onmouseout` 是 HTML 中的事件，当鼠标进入和离开按钮时会触发这两个事件。 - `showPopup()` 和 `hidePopup()` 是 JavaScript 中的函数，用来显示和隐藏弹窗。 - 弹窗用一个 `div` 元素来实现，设置为 `position: absolute`，这样它就可以在页面上随意定位。 - 弹窗里面有多个 `p` 元素，其中一个设置了 `red` 类名，用来改变文本颜色。 - 弹窗初始时设置为 `display: none`，这样它就不会一开始就显示出来，只有当鼠标进入按钮时才会显示。

阅读全文