启用:将鼠标悬停在保证金

时间:2018-02-12 18:36:23

标签: html css css-selectors

是否有可能在对象的“边缘区域”上启用: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的解决方案才会很可爱。

3 个答案:

答案 0 :(得分:1)

正如您对问题的评论中所述,这是一个有效的答案,使用伪元素填充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>

答案 1 :(得分:0)

不确定这是否是你的目标,但也许它会有所帮助:

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;
}

答案 2 :(得分:0)

只是为了好玩,使用透明边框的替代方案由于使用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>