如何使鼠标翻转点可点击？

Question

I have a rollover with text div that I'd like to make clickable/linkable. I'd like to whole div to be clickable not just the headings. But I'm unsure how to do so whether it's in my html or css or if I should add a script? Here's what I have:

<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;
}

And here's the demo: http://jsfiddle.net/L9bat8hj/

Answer 1

Move end a-tag behind the rollover element.

<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/