如何使框陰影可點擊

Question

我有一些文字在屏幕上有一個盒子陰影。文本鏈接到外部網站。不過，我只能點擊實際文字才能進入外部鏈接。我如何使盒子陰影可點擊，以便我還可以按文本框陰影上的任意位置，並使鏈接仍然有效。

Answer 1

據我所知，這是不可能的。 儘管您可以製作一個陰影類別的div，並且它的樣式正確，然後使其可以點擊。

Answer 2

您可以使用更大的寬度和高度繪製外框。並給他們ancher標籤。

HTML

<a href="http://google.com"> 
    <div class='outer-box'> 
    <div class="box"></div> 
    </div> 
</a> 

CSS

.outer-box{ 
     width:120px; 
     height:120px;  
     display: inline-block; 
    }.box{ 
     width:100px; 
     height:100px; 
     color:green; 
     box-shadow: 10px 10px 5px #888888; 
    } 

Answer 3

它是硬編碼的，所以不能得到完美的解決了這個，但你仍然可以嘗試這樣的事情。

.outer { 
 
    display:block; 
 
    width:100px; 
 
    padding: 2px 6px 6px 2px; 
 
/* The 6px is for right and bottom as they have more shadow 2px is for top and left*/ 
 
    height:auto; 
 
    cursor:pointer; 
 
} 
 
.inner { 
 
    margin:0px; 
 
    display:block; 
 
    height:50px; 
 
    width:100px; 
 
    box-shadow:2px 2px 10px #333; 
 
}

<div class='outer'> 
 
    <div class="inner"></div> 
 
</div>