我正在尝试使<aside>
元素可点击。里面有元素,我不想单独应用链接,我希望它是可单击的元素。
<aside class="projectindicator">
<a href="#projectAnchor">
<img src="_img/showcase/downArrowProjects.png" alt="down cursor"/>
<h1>PROJECT</h1>
<img src="_img/showcase/downArrowProjects.png" alt="down cursor"/>
</a>
</aside>
/*Project display*/
.projectindicator{
width: 277px;
height: 35px;
position: relative;
top: 530px;
left: 360px;
text-transform: uppercase;
}
.projectindicator img{
float: left;
}
.projectindicator h1{
float: left;
padding: 0 10px 0 10px;
}
.projectindicator a{
display: block;
font-family: book;
font-size: 30px;
float: left;
}
.projectindicator a:link, .projectindicator a:visited{
text-decoration: none;
color: #2b3a42;
}
.projectindicator a:hover{
text-decoration: none;
color: #3f5765;
}
.projectindicator a:active{
text-decoration: none;
color: #2b3a42;
}
问题是我得到了元素下面的可点击区域,并且可点击区域小于旁边的元素。这使用户很难单击链接。
很简单,但是我找不到解决方案。有人可以帮我吗?
最佳答案
在.projectindicator a
中,您添加了float: left
,但这将导致链接缩小到其内容的大小。我会删除它。.projectindicator
本身包含一个高度,而链接没有高度。我要么将高度添加到链接本身,要么给链接height: 100%
。
最后但并非最不重要的一点:确保.projectindicator
本身没有任何填充,并且其中的链接没有任何边距。
关于css - 块级可点击区域无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17533224/