0

我想在页面上有 4 张图片

当用户翻转每个图像时，我想将所有内容涂黑并有一个弹出窗口，用户可以在其中阅读一些信息并单击图像将它们带到不同的页面。

我通过漂亮照片获得了我想要的东西，但用户需要单击图像/不仅仅是将鼠标悬停在它上面，

<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 &amp; 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>
4

1 回答 1

0

如果有任何方法可以通过悬停触发它，您应该查看PrettyPhoto 文档。 但我首先想到的是用 jQuery 模拟点击事件。

像这样的东西：

$(document).ready(function () {

    $('div').hover(function () {
        $(this).trigger('click');
    });

    $('div').click(function () {
        alert("clicked");
    });

});


JSFiddle

于 2013-01-21T03:11:34.827 回答