启用 :hover on margin答案

【问题标题】：Enable :hover on margin启用 :hover on margin
【发布时间】：2018-02-13 11:30:36
【问题描述】：

是否有可能在对象的“边缘区域”上也启用 :hover css 效果？我发现了一个肮脏的解决方案，里面有一个额外的 div，但是这个简单的结构有没有更优雅的东西：

<ul>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
</ul>

CSS

ul {
  list-style: none; 
  margin: 0px; 
  padding: 0px;
}

li {
  margin: 5px 100px;
  background-color: #f1f1f1;
}

li:hover a {
  color: red;
}

#dirty {
  padding: 0px 100px;
  margin: 0px -100px;
}

嘿，这是我的肮脏示例：https://jsfiddle.net/equalsound/wn4ctxvh/

如果可能，纯 CSS 的解决方案会很不错。

【问题讨论】：

你不能使用填充？
不，边距在元素之外，而不是元素的一部分。边框和内边距不同。
不，由于一个 js 库正在复制我的原始元素，填充会使元素变大，这是我不想要的。
能否给item添加一个类来覆盖JS库？
你是this the render吗？我不太确定你告诉我们的内容。

标签： html css css-selectors

【解决方案1】：

根据 cmets 对您的问题的要求，这是一个有效的答案，使用伪元素填充 100px 侧边距：

ul {
  list-style: none; 
  margin: 0px; 
  padding: 0px;
}

li {
  position: relative;
  margin: 5px 100px;
  background-color: #f1f1f1;
}

li::before,
li::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}

li::before {
  right: 100%;
}

li::after {
  left: 100%;
}

li:hover a {
  color: red;
}

<ul>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
</ul>

【讨论】：

【解决方案2】：

不确定这是否是您的目标，但也许会有所帮助：

https://jsfiddle.net/wn4ctxvh/2/

<ul>


 <li>
    <div>
      <a>Hello</a>
    </div>
  </li>
  <li>
    <div>
      <a>Hello</a>
    </div>
  </li>
</ul>




ul {
list-style: none; 
  margin: 0px; 
  padding: 0px;
}

li div {
  margin: 5px 100px;
  background-color: #f1f1f1;
}

li:hover a {
  color: red;
}

【讨论】：

不，很遗憾没有。像这样，元素的宽度正在增加我不想要的，它应该保持与我的示例中相同的高度

【解决方案3】：

只是为了好玩，使用透明边框的替代方案由于使用background-clip: padding而不太实用：

ul {
  list-style: none; 
  margin: 0px; 
  padding: 0px;
}

li {
  margin: 5px 100px 5px 0;
  border-left: 100px solid transparent;
  background-clip: padding-box;
  background-color: #f1f1f1;
}

li:hover a {
  color: red;
}

<ul>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
</ul>

不过，如果您有能力制作 a 元素块并将背景颜色应用于它们，则可以避免这样做：

ul {
  list-style: none; 
  margin: 0px; 
  padding: 0px;
}

li {
  margin: 5px 100px 5px 0;
  border-left: 100px solid transparent;
}

li a {
  display: block;
  background-color: #f1f1f1;
}

li:hover a {
  color: red;
}

<ul>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
</ul>

【讨论】：