颜色框悬停css html

时间:2016-06-03 09:52:02

标签: html css

我尝试在框上应用悬停..意味着当我将鼠标拖到菜单项上时,必须更改背景颜色,以便我尝试此代码,请检查

我试试这个



body {
  background-color: black;
}
.lefttabs a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  font-size: medium;
  color: White;
  width: 133px;
  margin-left: 0px;
}
.lefttabs ul {
  list-style: none;
  margin: 0px 20px 0px 0px;
}
.lefttabs li {
  list-style: none;
  padding: 0px 0px 30px 0px;
}
.lefttabs li a {
  list-style: none;
  display: block;
}
.lefttabs a:hover,
.offcanvas a:focus {
  color: green;
  background-color: White;
  border-color: Yellow;
  color: #000!important;
  height: 20%;
  width: 10px;
}

<div class="lefttabs" style="width: 187px; height: 422px;">
  <ul>
    <li>
      <a>DASHBOARD</a>

    </li>
    <li>
      <a> EVENTS</a>
    </li>
  </ul>
</div>
&#13;
&#13;
&#13;

image http://oi65.tinypic.com/zk010k.jpg

在上面的图像我悬停框但这不完全填充,而我绘制白色框,所以我想通过悬停填充该框 任何解决方案

1 个答案:

答案 0 :(得分:1)

您必须在padding代码中显示a,而不是li代码。

.lefttabs li
{
   list-style:none;
}

.lefttabs li  a 
{
    list-style:none;
    display:block;
    padding: 0px 0px 30px 0px;
}