在Javascript / PHP / Codeigniter中悬停事件

作者: 威斯特
发布时间: 2023-12-28 03:51:47 (6月前)
转自：

4 条回复

0#
回复此人
威斯特 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在鼠标悬停时触发事件，并使用元素的数据描述来显示详细信息： </p> <pre> <code> <option onmouseover="displayDescription(this)" onmouseout="hideLabel()" data-server-description="your_description" id='1'> Server1 </option> <script> function displayDescription(ele) { // You can use the data-server-description attribute to catch the description var server_data = ele.data-server-description; // you can also use the ID to fetch the description if not embadded in as an html attribute var server_id = ele.id; document.getElementById('your_label_id').innerHTML = server_data; } function hideLabel() { document.getElementById('your_label_id').innerHTML =''; } </script> </code> </pre> </DIV>

编辑
1#
回复此人
纾潆锦袖迷子 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您使用的是bootstrap </p> <pre> <code> <a href="#" data-toggle="tooltip" title="server 1 description">server 1</a> <a href="#" data-toggle="tooltip" title="server 2 description">server 2</a> <a href="#" data-toggle="tooltip" title="server 3 description">server 3</a> </code> </pre> <P> 只需这些代码就行了。 </p> </DIV>

编辑
2#
回复此人
小狮子 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 请检查并运行以下代码： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <a href="#" title="server 1 description">server 1</a><br> <a href="#" title="server 2 description">server 2</a><br> <a href="#" title="server 3 description">server 3</a> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论