[英]How to make entire div clickable with css only
我试图让整个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可点击而不仅仅是文本?
谢谢你的帮助!
只需修改HTML结构并将div
放在a
元素内。
<div id="productfooter">
<a href="#">
<div id="stern">
<p class="sterntext">title title title title title title</p>
</div>
</a>
</div>
/* 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
。
/* 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
设置为块。
您可以将.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.