今天,我們將要介紹一個jQuery鼠標懸停顯示效果。
首先,我們需要一個HTML文件,這個文件里包含一個div和一個圖片:
<div id="hover-div"> <img src="image.jpg" alt="圖片"> </div>
接下來,我們需要在jQuery中為這個div添加鼠標懸停效果:
<script> $(document).ready(function(){ $("#hover-div").hover(function(){ $(this).css("opacity", "0.5"); $(this).append("<p>這是圖片描述</p>"); }, function(){ $(this).css("opacity", "1"); $(this).find("p:last").remove(); }); }); </script>
通過上述代碼,我們使用.hover()函數來為hover-div添加懸停事件。當鼠標進入時,設置div的透明度為0.5,并添加一個P標簽來顯示圖片描述;當鼠標退出時,還原div的透明度為1,并移除掉最后一個P標簽。
因此,我們已經成功地使用jQuery實現了一個簡單的鼠標懸停顯示效果。
上一篇vue打印歷史路由