Как сделать тень окна нажатой

Question

У меня есть текст на экране с тенью коробки. Текст ссылается на внешний веб-сайт. Тем не менее, я могу нажать только фактический текст, чтобы перейти во внешнюю ссылку. Как сделать так, чтобы ящик теневого окна был доступен для просмотра, так что я могу также нажимать в любом месте теней текстовых полей и поддерживать связь.

Answer 1

Насколько я знаю, это невозможно. Несмотря на то, что вы можете сделать div с классом тени и соответствующим образом нарисовать его, а затем сделать его интерактивным.

Answer 2

Вы можете нарисовать внешнюю коробку с большей шириной и высотой. и дать им метку теса.

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>