对整个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

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

Answer 2

这将工作…

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

Answer 3

可以这样做:

$('.projects_container_proj').children().click(function(){
     window.location= 'your url';
 });

希望有帮助

Answer 4

如果你不想使用javascript，你可以在a标签中包装div。

Answer 5

试试这个:

<div class="projects_container_proj" onclick="window.location='http://www.google.com';">
    Other things here
</div>