Question

我在导航容器上填充，我想保留。但是，当每个列表项悬停时应用background-color时。该列表的background red为15px 15px，但保持其.nav-contain { background-color: black; padding: 15px; 15px; } .nav-li li:hover { background-color: red; }的黑色填充，如何在整个悬停时将其操作为红色？

<div class="nav-contain">
  <div class="nav-li">
    <ul>
      <li>home</li>
    </ul>
  </div>
</div>

{'offers':
           {
             $cond: [
               { $ne: ['offers', 'a'] },
               {$elemMatch: {_id: id, 'status': 'A' }},
               {$elemMatch: {_id: id, 'status': 'A' }}
             ]
           }
         },

Answer 1

只需在:hover类中添加.nav-contain修饰符，即将背景颜色设置为红色。例如：

.nav-contain {
    background-color:black; 
    padding: 15px; 15px;
}

.nav-li li:hover, 
.nav-container:hover {
    background-color:red;
}

如果这不是您想要的，那么您将不得不将HTML和要添加填充的元素的结构略有不同。例如，您可以在li元素中添加填充，而不是像您当前拥有列表的div一样。

Answer 2

我不确定你究竟在问什么，但是，我相信我已经解决了你的问题。 CSS padding属性会在元素周围放置一个空格框，父元素会增加其大小以适应，因此您应该编辑nav-li li元素的填充而不是.nav-contain元件。

JsFiddle：Js Fiddle

如何用另一个元素填充替换填充

2 个答案: