我正在尝试创建一个带有大型可点击区域的侧边栏,这些区域使用超链接并具有悬停效果。我是否通过在列表中插入按钮类型来实现此目的?还是有更简单的方法?这是我到目前为止(不注意丑陋的颜色);
HTML:
<div id="sideNav">
<li<a class="menu" href="#"><a></li><hr>
<li<a class="menu" href="#"> Account<a></li><hr>
<li<a class="menu" href="#"> Live Events <a></li><hr>
<li<a class="menu" href="#"> Football<a></li><hr>
<li<a class="menu" href="#"> Baseball<a></li><hr>
<li<a class="menu" href="#"> Soccer<a></li><hr>
<li<a class="menu" href="#"> Basketball<a></li><hr>
<li<a class="menu" href="#"> Hockey<a></li><hr>
<li<a class="menu" href="#"> MMA<a></li><hr>
<li<a class="menu" href="#"> eSports<a></li><hr>
<li<a class="menu" href="#"> Tennis<a></li><hr>
<li<a class="menu" href="#"> Cricket<a></li><hr>
<li<a class="menu" href="#"> Golf<a></li><hr>
<li<a class="menu" href="#"> Badminton<a></li><hr>
<li<a class="menu" href="#"> Handball<a></li><hr>
<li<a class="menu" href="#"> Rugby<a></li><hr>
<li<a class="menu" href="#"> Snooker<a></li><hr>
<li<a class="menu" href="#"> Table Tennis<a></li><hr>
<li<a class="menu" href="#"> Volleyball<a></li><hr>
</div>
CSS:
.menu a {
line-height:50px;
border-bottom: 1px solid black;
color:#fff;
border:1px dotted black;
display:block;
}
a:hover{
background-color:#fff;}
答案 0 :(得分:1)
不确定我是否理解正确。
您想创建一个具有悬停效果的侧边栏吗?
使用伪类:悬停。这将是你的CSS代码:
a.menu:link {
line-height:50px;
border-bottom: 1px solid black;
color:#fff;
border:1px dotted black;
display:block;
}
a.menu:visited {
color:$fff;
}
a.menu:hover {
color:#393939;
}
在:hover类中,只需编写要更改的属性即可。在这种情况下,当您将按钮的颜色悬停在其上时,按钮的颜色将从#fff更改为#393939。
如果需要,还可以添加过渡效果。 http://www.w3schools.com/css/css3_transitions.asp 请注意,转换效果限制了浏览器兼容性。
另外,要指出代码中的一些错误: 您的 li 开头标记不完整。 您的 a 标记未正确关闭。 这就是你所拥有的:
<li<a class="menu" href="#"> Account<a></li>
这应该是:
<li><a class="menu" href="#"> Account</a></li>
除此之外, li 标签通常由 ul 标签括起来。我不认为他们自己工作。
<ul>
<li></li>
</ul>
最后, hr 标签不是必需的。您已经在每个按钮的底部都有边框,而 li 标记会为您打破这些行。
答案 1 :(得分:0)
你可以尝试这个:
#sideNav
{
width:100px;
background-color:black;
color:white;
border-right:12px solid blue;
}