0

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

这是我的演示：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>

谢谢！！

4

5 回答 5

3

也许您可以将<a>标签与display: block属性一起使用。

于 2013-02-27T11:37:43.653 回答
1

这将工作..

.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>
于 2013-02-27T11:48:39.100 回答
1

是的，你可以这样做：

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

希望能帮助到你 ：）

于 2013-02-27T11:59:38.327 回答
1

如果您想在没有 javascript 的情况下执行此操作，可以将 div 包装在a标记内。

于 2013-03-02T07:29:08.657 回答
0

试试这个：

<div class="projects_container_proj" onclick="window.location='http://www.google.com';">
    Other things here
</div>
于 2013-02-27T11:35:16.587 回答