css - 如何仅使用CSS使整个div可点击

Question

我试图让整个 div 成为一个可点击的链接，而不仅仅是文本。我尝试了各种方法，例如概述的方法 here但所做的只是让形状消失。

到目前为止我有这个:

http://jsfiddle.net/n5xow3cd/2/

#productfooter {
width:100%;
max-width:500px;
height: 100px;
    margin:0 auto;
 }

#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732')
    no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}

.sterntext {
z-index: 999;
position: relative;
height: 75px;
vertical-align: middle;
display: table-cell;
    padding:0 7px;
}


#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638')
no-repeat center;
    color:#fff;
    background-size:100%;

}

#stern a {
    color:#000;
    font-family:arial;
    font-size:12pt;
}

#stern a:hover {
    color:#fff;
}

我可以更改什么以使整个#stern 可点击而不仅仅是文本？

感谢您的帮助!

Answer 1

您可以将 .sterntext 显示为 table-row 并将 #stern a 显示为 table-cell。

#productfooter {
    width:100%;
    max-width:500px;
    height: 100px;
    margin:0 auto;
}
#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732') no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}
.sterntext {
    z-index: 999;
    position: relative;
    height: 75px;
    vertical-align: middle;
    display: table-row;
}
#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638') no-repeat center;
    color:#fff;
    background-size:100%;
}
#stern a {
    color:#000;
    font-family:arial;
    font-size:12pt;
    display: table-cell;
    vertical-align: middle;
    padding: 0 7px;
}
#stern a:hover {
    color:#fff;
}

<div id="productfooter">
    <div id="stern">
        <p class="sterntext"><a href="#">title title title title title title</a>
        </p>
    </div>
</div>