I'm viewing the below example in Chrome and can't seem to get cursor: pointer
to work on the :after
element of li
. Is there a way to get around this?
我在Chrome中查看以下示例,似乎无法获取光标:指针在li的元素之后工作。有办法解决这个问题吗?
http://jsfiddle.net/qKMPQ/2/
1 个解决方案
#1
28
Instead of setting the cursor: pointer
on the :after
element, set it on the entire li
and it will show up on both.
而不是在:after元素上设置光标:指针,将其设置在整个li上,它将显示在两者上。
Edit:
For those of you trying to have different cursors on the li
and its :after
pseudo-element, you simply need to explicitly define the cursor
property of the content inside the li
. See this updated fiddle: http://jsfiddle.net/qKMPQ/20/
编辑:对于那些尝试在li及其上使用不同游标的人:在伪元素之后,您只需要明确定义li内容的游标属性。看到这个更新的小提琴:http://jsfiddle.net/qKMPQ/20/
<ul>
<li>
<a href="#"></a>
</li>
</ul>
ul { list-style-type: none; }
li { cursor: pointer; }
a {
background: red;
float: left;
width: 100px;
height: 100px;
cursor: help;
display: block; }
li:after {
content: "";
background: yellow;
float: left;
width: 100px;
height: 100px;
display: block; }
#1
28
Instead of setting the cursor: pointer
on the :after
element, set it on the entire li
and it will show up on both.
而不是在:after元素上设置光标:指针,将其设置在整个li上,它将显示在两者上。
Edit:
For those of you trying to have different cursors on the li
and its :after
pseudo-element, you simply need to explicitly define the cursor
property of the content inside the li
. See this updated fiddle: http://jsfiddle.net/qKMPQ/20/
编辑:对于那些尝试在li及其上使用不同游标的人:在伪元素之后,您只需要明确定义li内容的游标属性。看到这个更新的小提琴:http://jsfiddle.net/qKMPQ/20/
<ul>
<li>
<a href="#"></a>
</li>
</ul>
ul { list-style-type: none; }
li { cursor: pointer; }
a {
background: red;
float: left;
width: 100px;
height: 100px;
cursor: help;
display: block; }
li:after {
content: "";
background: yellow;
float: left;
width: 100px;
height: 100px;
display: block; }