如何使用css使整個div可單擊

Question

我試圖讓整個div成為可點擊的鏈接，而不僅僅是文本。 我嘗試了各種各樣的方法，如這里概述的方法，但所有這些都是讓形狀消失。

到目前為止我有這個：

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

只需修改HTML結構並將div放在a元素內。

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

http://jsfiddle.net/n5xow3cd/3/

Answer 2

無法編輯HTML

 /* For functional purposes */ div { width: 100px; height: 100px; } a { display: block; width: 100%; height: 100%; } /* For design purposes */ div { background: #2c3e50; color: white; text-decoration: none; } a { color: inherit; text-decoration: inherit; } 

 <div><a href="#">text here</a></div> 

我們只是將a設置為一個block ，讓他獲得全width和全height 。

可以編輯HTML

 /* For functional purposes */ a { display: block; width: 100px; height: 100px; } /* For design purposes */ a { background: #2c3e50; color: white; text-decoration: none; } 

 <a href="#">text here</a> 

我們將a設置為塊。

Answer 3

您可以將.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>