使用按钮

Question

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

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

Answer 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 标记会为您打破这些行。

Answer 2

你可以尝试这个：

#sideNav
{
  width:100px;
  background-color:black;
  color:white;
  border-right:12px solid blue;
}

DEMO HERE