错误的行为:悬停

时间:2017-03-17 10:18:15

标签: html css

当您将鼠标悬停在<li>区域上时,它会变为红色,但<a>内的区域仍为白色。当我指向她时,区域<a>变红了。这是分开发生的。

如何解决这个问题?如何使整个区域的悬停区<li>变红?

.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}
.menu * {
  text-decoration: none;
  font-size: 16px;
  background-color: #fff;
}
.menu ul {
  margin: 0;
  padding-left: 10px;
  list-style: none;
}
.menu ul li {
  padding: 3px 0px 3px 10px;
  color: #000;
  display: block;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li a {
  display: block;
  color: #000;
}
.menu ul li:hover {
  background: #e50003;
}
.menu ul li.active > a {
  text-decoration: none;
}
.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
  background: #e50003;
}
.menu ul li .submenu {
  display: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
  border-width: 0px 0px 0px 1px;
  border-style: solid;
  border-color: #bbb;
}
.menu ul li:hover > .submenu {
  background-color: white;
  display: block;
  position: absolute;
  left: 220px;
  width: 250px;
  top: 0;
  z-index: 99;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
<div class="menu">
  <ul>
    <li class="active">
      <a href="#">Пункт 1</a>
      <div class="submenu submenu1">
        <ul>
          <li class="active">
            <a href="#">Пункт 2</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

4 个答案:

答案 0 :(得分:3)

你只需删除它们:

.menu * {
  background-color: #fff;
}

.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
  background: #e50003;
}

&#13;
&#13;
.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}
.menu * {
  text-decoration: none;
  font-size: 16px;
  /* background-color: #fff; */
}
.menu ul {
  margin: 0;
  padding-left: 10px;
  list-style: none;
}
.menu ul li {
  padding: 3px 0px 3px 10px;
  color: #000;
  display: block;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li a {
  display: block;
  color: #000;
}
.menu ul li:hover {
  background: #e50003;
}
.menu ul li.active > a {
  text-decoration: none;
}
/*.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
  background: #e50003;
}*/
.menu ul li .submenu {
  display: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
  border-width: 0px 0px 0px 1px;
  border-style: solid;
  border-color: #bbb;
}
.menu ul li:hover > .submenu {
  background-color: white;
  display: block;
  position: absolute;
  left: 220px;
  width: 250px;
  top: 0;
  z-index: 99;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
&#13;
<div class="menu">
  <ul>
    <li class="active">
      <a href="#">Пункт 1</a>
      <div class="submenu submenu1">
        <ul>
          <li class="active">
            <a href="#">Пункт 2</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您需要在child元素上悬停时设置parent元素的背景,这是您的情况。

.menu ul li:hover,
.menu ul li:hover > a{
  background: #e50003;
  color: #fff;
}

&#13;
&#13;
.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}
.menu * {
  text-decoration: none;
  font-size: 16px;
  background-color: #fff;
}
.menu ul {
  margin: 0;
  padding-left: 10px;
  list-style: none;
}
.menu ul li {
  padding: 3px 0px 3px 10px;
  color: #000;
  display: block;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li a {
  display: block;
  color: #000;
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li:hover,
.menu ul li:hover > a{
  background: #e50003;
  color: #fff;
}
.menu ul li.active > a {
  text-decoration: none;
}
.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
}
.menu ul li .submenu {
  display: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
  border-width: 0px 0px 0px 1px;
  border-style: solid;
  border-color: #bbb;
  
  transition: all 0.5s ease 0.05s;
  -webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li:hover > .submenu {
  background-color: white;
  display: block;
  position: absolute;
  left: 220px;
  width: 250px;
  top: 0;
  z-index: 99;
}
&#13;
<div class="menu">
  <ul>
    <li class="active">
      <a href="#">Пункт 1</a>
      <div class="submenu submenu1">
        <ul>
          <li class="active">
            <a href="#">Пункт 2</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

.menu ul li.active > a:hover,
.menu ul li.active > a
{
background-color:transparent;
}

答案 3 :(得分:0)

上面你得到了正确的答案。 只是标记,看起来有一个增强,使红色部分的宽度在悬停时发生变化。 变化宽度应该是220px以下.menu如下。

.menu {
  z-index: 100;
  width: 220px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}