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