將超鏈接應用於整個DIV區域？

我正在構建我的網站的元素，允許用戶將鼠標懸停在圖像和文本片段上。將超鏈接應用於整個DIV區域？

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>

謝謝!!

來源

2013-02-27 michaelmcgurk

這將工作..

.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-27 11:48:39 Amrendra

這是一個輝煌的非JS解決方案 - 非常感謝！ – michaelmcgurk 2013-03-26 14:05:53

試試這個：

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

來源

2013-02-27 11:35:16 devWaleed

，也許你可以使用<a>標籤與display: block性能。

來源

2013-02-27 11:37:43 Imperative

是的，你可以這樣來做：

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

希望它能幫助:)

來源

2013-02-27 11:59:38 Avishek

您可以包裝一個在div標記如果你想沒有JavaScript的話。

來源

2013-03-02 07:29:08

將超鏈接應用於整個DIV區域？

回答

相關問題