Question

我希望在悬停在其上时突出显示每个红色的菜单项。所以凭着我的直觉，我做了.menu ul li: hover{...}。

怀疑1：但这只会使li文字背景改变颜色而不是li的填充部分。为什么padding不改变颜色？padding也是li元素的一部分吗？

怀疑2：我通过执行.menu ul :hover实现了预期的行为，如下面的代码所示。但这违背了我的直觉。是不是说整个ul应该在悬停在其上时更改背景颜色，以便突出显示整个菜单项？

守则：

＆＃13;

body {
  background-color: #EEE;
  margin: 0;
  padding: 0;
}
.header {
  height: 60px;
  background-color: #FFF;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.logo {
  position: relative;
  display: inline-block;
  height: 40px ;
  width: 100px ;
  top:10px;
  left: 10px;
}
.menu ul {
  float: right;
  padding: 0;
  list-style-type: none;
  margin-right:40px;
  margin-top: auto;
  margin-bottom:auto;
}
.menu ul li {
  position: relative;
  top: -15px;
  display: inline;
  padding:10px 20px;
}
.menu ul :hover {
  background-color: red;
}
.menu ul li a {
  text-decoration: none;
}

＆＃13;

<div class="header">
  <div class="logo">
    <img src="logo_new1.png" class="img">
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Activities</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </div>
</div>

＆＃13;

Answer 1

目前，您没有徘徊ul，因为ul和:hover之间有空格，因此它将background:red添加到ul的所有子元素中悬停时{1}}（li）。这就是为什么你认为它正在使用ul，

这是代码的实际输出

.menu ul *:hover {background:red}

:hover它会影响padding 如果该元素有padding，如果没有，则不会添加padding，所以如果您希望padding :hover

li。

body {
  background-color: #EEE;
  margin: 0;
  padding: 0;
}
.header {
  height: 60px;
  background-color: #FFF;
  box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}
.logo {
  position: relative;
  display: inline-block;
  height: 40px;
  width: 100px;
  top: 10px;
  left: 10px;
}
.menu ul {
  float: right;
  padding: 0;
  list-style-type: none;
  margin-right: 40px;
  margin-top: auto;
  margin-bottom: auto;
}
.menu ul li {
  position: relative;
  top: -15px;
  display: inline;
  padding: 10px 20px;
}

.menu ul li a {
  text-decoration: none;
}
.menu ul li:hover  {
  background-color: red;
}

<div class="header">
  <div class="logo">
    <img src="logo_new1.png" class="img">
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Activities</a>
      </li>
      <li><a href="#">About us</a>
      </li>
      <li><a href="#">Contacts</a>
      </li>
    </ul>
  </div>
</div>

select min(salary)as minsalary from (select * from userdetails 
        order by salary desc limit 3) as details

为什么在ul和li的情况下悬停行为不直观？

1 个答案: