[英]Display Image on Link Hover
我在列表中有很多名字,例如:
<div class="names">
<ul>
<li><a href=#name1">name1</a></li>
<li><a href=#name2">name2</a></li>
<li><a href=#name3">name3</a></li>
<li><a href=#name4">name4</a></li>
<li><a href=#name5">name5</a></li>
</ul>
</div>
我想在光標旁邊顯示與鼠標懸停時每個名稱相關的圖像縮略圖。 jquery有可能嗎?
謝謝堆。 皮亞
這是懸停彈出窗口的基本實現:
$('.names a').on('mouseenter', function(evt){
$('.popup').css({left: evt.pageX+30, top: evt.pageY-15}).show();
$(this).on('mouseleave', function(){
$('.popup').hide();
});
});
您可以根據懸停的元素來更改彈出窗口的內容(例如,通過使用http://api.jquery.com/jQuery.data/ )
使用數據屬性的示例: http : //jsfiddle.net/CaQUY/1/
這是一個在懸停時顯示圖像縮略圖的JavaScript解決方案。
<p id="p1"><a href="https://cnet.com">Cnet</a></p> <p id="p2"><a href="https://codegena.com">Codegena</a></p> <p id="p3"><a href="https://apple.com">Apple</a></p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <link href="https://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet"> <script type="text/javascript"> $(function() { $('#p1 a').miniPreview({ prefetch: 'pageload' }); $('#p2 a').miniPreview({ prefetch: 'parenthover' }); $('#p3 a').miniPreview({ prefetch: 'none' }); }); </script> <script src="https://codegena.com/assets/js/image-preview-for-link.js"></script>
如果您想了解更多有關如何使用它的信息,請訪問“ 懸停時顯示圖像縮略圖 ”
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.