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/

如何使rollover div可点击？

1 个答案: