Question

我正在开发网站，目前有一个问题，我需要编写一个javascript代码，这些代码可以在图像悬停后变得比其他图像更大，并在图像上另外显示几行文本。我查看了这篇文章https://css-tricks.com/a-really-nice-way-to-handle-popup-information/，但它并没有解决我的问题。你能告诉我吗？

Answer 1

你想要的是fancybox虽然它适用于点击，而不是悬停，所以你必须添加一些代码才能让它在我上面悬停时工作

注意：尽管可以（如此处所示）在悬停时进行此操作，但不建议这样做。把一堆这些放在一个页面上，它会非常烦人！

Here is a simple example，或查看下面的代码段

＆＃13;

$(document).ready(function() {
    $("a#inline").fancybox({
		'hideOnContentClick': true
	});
    // add the bit below to make it work on hover
    $(".hoverClick").hover(function(){
		$(this).click();
	});
  
  
  
});

＆＃13;

<link rel="stylesheet" href="http://dodsoftware.com/sotests/fancy/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.mousewheel-3.0.4.pack.js"></script>

<a id="inline" class="hoverClick" href="#data"><img alt="" src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg"> </a>

<div style="display:none">
    <div id="data">
    <img alt="" src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg"><br>
        <h3>My Cool Title</h3>
        <p>Put your cool item descrtiption here</p>
   </div>
</div>

＆＃13;

将鼠标悬停在图片效果上

1 个答案: