我想在页面上有4张图片
当用户对每个图像进行rollso时，我想要将所有图像变黑并且有一个弹出窗口，用户可以在其中阅读某些信息并单击图像将其带到另一个页面。
我想通过prettyphoto获得我想要的东西，但是用户需要点击图片/不要只是将鼠标悬停在它上面，
<table class="gallery clearfix" cellpadding="10" cellspacing="40" border="0">
<tr>
<td valign="top" width="200px">
<a href="#info_leadership" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/leadership_development.jpg" style="border:none" height="300" /></a>
</td>
<td valign="top" width="200px">
<a href="#info_team_development" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/team_development.jpg" style="border:none" height="300" /></a>
</td>
</tr>
<tr>
<td valign="top">
<a href="#info_strategic_intelligence" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/strategic_intelligence.jpg" style="border:none" height="300" /></a>
</td>
<td valign="top">
<a href="#info_emotional_social" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/emotional_social.jpg" style="border:none" height="300" /></a>
</td>
</tr>
</table>
<div id="info_leadership" style="display:none;">
<p class="table"><b>Leadership Development</b></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna,
cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas.
Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula,
varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar
ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p>
</div>
<div id="info_team_development" style="display:none;">
<p class="table"><b>Team Development</b></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna,
cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas.
Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula,
varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar
ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p>
</div>
<div id="info_strategic_intelligence" style="display:none;">
<p class="table"><b>Strategic Intelligence</b></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna,
cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas.
Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula,
varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar
ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p>
</div>
<div id="info_emotional_social" style="display:none;">
<p class="table"><b>Emotional & Social Intelligence</b></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna,
cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas.
Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula,
varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar
ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({ theme: 'light_square' });
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({ hideflash: true });
});
</script>
答案 0 :(得分：0)
如果通过悬停 触发，则应检查 PrettyPhoto文档。
但我想到的第一件事就是使用jQuery模拟click事件。
这样的事情：
$(document).ready(function () {
$('div').hover(function () {
$(this).trigger('click');
});
$('div').click(function () {
alert("clicked");
});
});
的 JSFiddle