javascript - 将超链接应用于整个 DIV 区域？

Question

我正在构建我网站的一个元素，允许用户将鼠标悬停在图像和一段文本上。

这是我的演示:http://jsfiddle.net/j74Gc/

悬停时的 css 过渡动画效果很好，但是，我想知道，是否可以将超链接应用于整个区域？那么如果用户点击图片或文字，或者 projects_container_proj 区域中的任何地方，它会链接到 1 个页面吗？

这是我目前使用的 HTML:

<section id="lastprojects3-920639076" class="home_widget recentProjects3 two columns" style="width:200px">
<div class="projects_container_proj">
    <div style="margin-top: 20px;" class="project_list_s3">
        <ul class="slides_container jcarousel-skin-tango">
            <li>
            <div class="slides_item post-thumb" onmouseover="$(this).find('.hover_the_thumbs').css('background-color','rgba(0, 0, 0, 0.6)'); $(this).find('.magnify_this_thumb').css('left', '51%').css('opacity',1); $(this).find('.hyperlink_this_thumb').css('left', '43%').css('opacity',1); $(this).children('div').css('background','#4a90c2'); $(this).find('.p_title a').css('color', 'white'); $(this).find('.p_exerpt p').css('color', 'white'); $(this).find('.p_title').css('border-top', '4px solid #3b739b');" onmouseout="$(this).find('.hover_the_thumbs').css('background-color','rgba(0, 0, 0, 0)'); $(this).find('.magnify_this_thumb').css('left', '-15%').css('opacity',0); $(this).find('.hyperlink_this_thumb').css('left', '105%').css('opacity',0); $(this).children('div').css('background','#EEE'); $(this).find('.p_exerpt p').css('color', ''); $(this).find('.p_title a').css('color', ''); $(this).find('.p_title').css('border-top', '4px solid #DDD');">
                <ul class="ch-grid">
                    <li>
                    <div class="ch-item">
                        <a style="position: relative; float: left; width: 100%; height: 100%; overflow:hidden;" href="/?post_type=portfolio&#038;p=1333">
                        <img class="img_thumb" alt="" src="http://placehold.it/200x200" style="position:relative; height:100%; width: 100%;"/></a>
                        <a class="flex_this_thumb" href="#"></a>
                        <div class="hover_the_thumbs" style="position: absolute; float: left; width: 100%; height: 100%;">
                            <div class="hyperlink_this_thumb" onclick="window.location = $(this).parents('.ch-item').children('a').eq(0).attr('href');" onmouseover="$(this).css('background','#4a90c2');" onmouseout="$(this).css('background','white');" style="position: absolute; width: 30px; height: 30px; top: 43%; float: left; left: 99%; color: black; background: white;">
                                <img src="#" style="margin-top: 7px; opacity: .8 !important;"/>
                            </div>
                        </div>
                    </div>
                    </li>
                </ul>
                <div class="no-flicker" style="position: relative; background: #EEE; padding-bottom: 15px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;">
                    <div style="height: 52px;">
                        <div style="padding-left: 15px; padding-top: 6px; border-top: solid 4px #DDD; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;" class="p_title no-flicker">
                            <a style="-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;" href="/?post_type=portfolio&#038;p=1333">Title</a>
                        </div>
                    </div>
                </div>
            </div>
            </li>
        </ul>
    </div>
</section>

谢谢!!

Answer 1

也许你可以使用 <a>用 display: block 标记属性。