javascript - 将鼠标悬停在图像效果上

Question

我正在开发网站，目前有一个问题，我需要编写 javascript 代码，使图像在悬停时变得比其他图像更大，并在图像上额外显示几行关于产品的文本。我看过这篇文章https://css-tricks.com/a-really-nice-way-to-handle-popup-information/但它并没有完全解决我的问题。你能给点建议吗？

Answer 1

你要的是fancybox尽管它在点击时有效，但在悬停时无效，因此您必须添加一些代码才能使其在悬停时有效，如下所示

注意:虽然可以(如此处所示)在悬停时执行此操作，但不建议这样做。把一堆这样的东西放在一个页面上，很快就会变得非常烦人!

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

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

<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>