我的理解使我相信将<a>
带有display:block;
CSS 属性的 a 放在 a<div>
中应该会导致整个 div “成为”链接(即我将鼠标悬停在 div 中的任何地方,它都被认为是链接,因为链接占用了 100 % 高度和宽度)。
在下面的示例中,这种行为似乎不起作用。如果您更愿意inspect element
用实时代码四处寻找,您可以查看该站点@:http ://shayla.phasesolutions.ca/ 。有关我所描述的问题,请参阅页面顶部的导航。
HTML:
<header>
<div class="logo"><a href="#"></a></div>
<div class="nav-homepage"><a href="#"></a></div>
<div class="nav-webdesign"><a href="#"></a></div>
<div class="nav-graphicdesign"><a href="#"></a></div>
<div class="nav-miscartwork"><a href="#"></a></div>
<div class="nav-aboutme"><a href="#"></a></div>
<div class="nav-contactme"><a href="#"></a></div>
</header>
CSS:
header {
.site-section;
height: 125px;
div {
float: left;
position: relative;
top: 10px;
a {
display: block;
}
}
div:first-child {
position: relative;
top: 0px;
}
}
.nav-aboutme, .nav-contactme, .nav-graphicdesign, .nav-homepage, .nav-miscartwork, .nav-webdesign, .shadow, .homepage-nav-aboutme, .homepage-nav-contactme, .homepage-nav-graphicdesign, .homepage-nav-miscartwork, .homepage-nav-webdesign, .logo{
background: url(/resource/img/sprites.png) no-repeat;
}
.nav-aboutme {
background-position: -81px -361px ;
width: 76px;
height: 105px;
margin-right: 49px;
}
.nav-contactme {
background-position: 0 -360px ;
width: 76px;
height: 105px;
}
.nav-graphicdesign {
background-position: -79px -246px ;
width: 89px;
height: 105px;
margin-right: 49px;
}
.nav-homepage {
background-position: 0 -245px ;
width: 76px;
height: 105px;
margin-right: 49px;
}
.nav-miscartwork {
background-position: -79px -132px ;
width: 85px;
height: 105px;
margin-right: 49px;
}
.nav-webdesign {
background-position: 0 -132px ;
width: 76px;
height: 105px;
margin-right: 49px;
}