javascript - 如何使翻转 div 可点击？

Question

我有一个带有文本 div 的鼠标悬停，我想将其设置为可点击/可链接。我希望整个 div 都可以点击，而不仅仅是标题。但我不确定该怎么做，无论是在我的 html 还是 css 中，还是我应该添加脚本？这是我拥有的:

<div class="box one">
        <a href="lost.html"><img src="http://www.mydogbreeders.com/wp-content/themes/dogBreedersResponsive2014/images/dogs/beagle.jpg" alt="Lost" data-over="images/placeholder-image-hover.png" data-out="images/placeholder-image-hover.png"></a>
        <div class="description">
        <div class="description-inner">
        <h3> heading </h3>
        <h4> subheading</h4>
        </div><!--description-inner-->
        </div><!--description-->
    </div> <!--box one-->



.box{
margin:0 20px 20px 0;
float: left;
position:relative;
}
.description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:#deefed;
color:#F00;
width:460px;
height:300px;
visibility:hidden;
opacity:0;
display:table;
}
.description-inner {
display:table-cell;
vertical-align:middle;
}
.description h3{
font-size:1.25em;
color:#00a8cf;
font-weight:bold;
font-style:italic;
text-transform:uppercase;
padding:20px 0 0 0;
margin:auto;
text-align:center;
width:90%;
top:50%;
border-top:1px #F00 solid;
}
.description h4 {
color:#00a8cf;
font-style:italic;
font-weight:normal;
padding:0 0 20px 0;
margin:auto;
text-align:center;
width:90%;
border-bottom:1px #F00 solid;
}
.box:hover .description {
visibility: visible;
opacity: 1;
}

这是演示:http://jsfiddle.net/L9bat8hj/

Answer 1

将结束 a 标签移到滚动元素后面。

<div class="box one">
    <a href="lost.html">
        <img src="http://www.mydogbreeders.com/wp-content/themes/dogBreedersResponsive2014/images/dogs/beagle.jpg" alt="Lost" data-over="images/placeholder-image-hover.png" data-out="images/placeholder-image-hover.png">
        <div class="description">
            <div class="description-inner">
                <h3> heading </h3>
                <h4> subheading</h4>
            </div><!--description-inner-->
        </div><!--description-->
    </a>
</div> <!--box one-->

http://jsfiddle.net/L9bat8hj/1/