Javascript 是否将超链接应用于整个DIV区域？

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

这是我的演示：

悬停时的css过渡动画效果很好，但是，我想知道，是否可以将超链接应用到整个区域？因此，如果用户单击图像或文本，或

项目\u容器\u项目

区域中的任何位置，它将链接到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>

谢谢

试试这个：

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

这里还有其他东西

试试这个：

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

这里还有其他东西

也许您可以将

标记与

显示：块

属性一起使用。

也许您可以将

标记与

显示：块

属性一起使用。

这将起作用

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

.blockLink
{  
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
背景色：#ffffff；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
不透明度：0；
}

这就行了

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

.blockLink
{  
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
背景色：#ffffff；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
不透明度：0；
}

是的，您可以这样做：

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

---

希望有帮助：）

是的，您可以这样做：

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

---

希望有帮助：）

如果不想使用javascript，可以将div包装在a标记中

---

如果不想使用javascript，可以将div包装在a标记中