onmouse實現滑鼠懸停內容顯示及隱藏
阿新 • • 發佈：2018-12-13
先上程式碼：
<html> <head> <title>js操作</title> <style> .div_in{ width:330px; height:165px; } .div_in2{ width:321px; height:20px; padding:18px 0 17px 0; line-height:22px; font-size:14px; border: 1px solid rgb(234, 238, 237); } .div_meau1{ display:inline-block; padding-left:15px; font-size:18px; font-weight:500; padding:0 8px; vertical-align:top; } .div_meau2{ margin:0 5px 5px 0; padding:0 8px; display:inline-block; vertical-align:top; } .div_tag1{ width:200px; height:400px; margin-top:-50px; margin-left:322px; border: 1px solid rgb(234, 238, 237); display:none; } </style> <script type="text/javascript"> function myClickshow(one){ var event=document.getElementById(one); event.style.display="block"; } function myClickhide(one){ var event=document.getElementById(one); event.style.display="none"; } </script> </head> <body> <div class="div_in"> <div class="div_in2" onmouseout="myClickhide('one1')" onmouseover="myClickshow('one1')"> <div class="div_meau1">技術</div> <div class="div_meau2">Java</div> <div class="div_meau2">PHP</div> <div class="div_meau2">C++</div> <div class="div_meau2" style="margin-left:10px;">區塊鏈</div> <img src="logo.png" /> <div id="one1" class="div_tag1"> <div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">後端開發</div> <div class="div_meau2">Java</div> <div class="div_meau2">PHP</div> <div class="div_meau2">C++</div> <div class="div_meau2">C#</div> <div class="div_meau2">資料探勘</div> </div> </div> </div> </body> </html>
效果圖：
未將滑鼠移至塊上：
將滑鼠移至塊上：
div關鍵程式碼：
<div id="one1" class="div_tag1" onmouseout="myClickhide('one2')" onmouseover="myClickshow('one2')">當有滑鼠放置在該div上時，呼叫myClickshow()函式。當滑鼠離開該div上時，呼叫myClickhide()函式。
script關鍵程式碼：
<script type="text/javascript"> function myClickshow(one){ var event=document.getElementById(one); event.style.display="block"; } function myClickhide(one){ var event=document.getElementById(one); event.style.display="none"; } </script>myClickshow接受傳遞的引數one，呼叫getElementById()方法，得到div的拷貝，指向真正的div塊。更改div的display屬性為 block ，即可顯現出來。
myClickhide接受傳遞的引數one，呼叫getElementById()方法，得到div的拷貝，指向真正的div塊。更改div的display屬性為 none ，即可隱藏。