使用按钮

时间:2015-12-12 06:22:06

标签: html css html5 button nav

我正在尝试创建一个带有大型可点击区域的侧边栏,这些区域使用超链接并具有悬停效果。我是否通过在列表中插入按钮类型来实现此目的?还是有更简单的方法?这是我到目前为止(不注意丑陋的颜色);

enter image description here

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;}

2 个答案:

答案 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;
}

DEMO HERE