如何使鼠標翻轉點可點擊？

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-tag移動到滾動元素的后面。

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