I have the following HTML:
<li>
<a href="mylink">Some text</a>
</li>
I am trying to disable the link via CSS on the parent <li>
element but to no avail.
<li class="disabled">
<a href="mylink">Some text</a>
</li>
And the CSS I have tried:
li.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
li.disabled:hover {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
I have also tried:
li.disabled a {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
li.disabled a:hover {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
答案 0 :(得分:0)
根据CanIUse,Chrome不支持pointer-event
,因此这项工作可以帮助您:
HTML
<ul>
<li class="disabled">
<a href="http://google.com">Some text</a>
</li>
</ul>
CSS
li.disabled a {
cursor: default;
opacity: 0.6;
}
li.disabled{
position: relative;
}
li.disabled:before{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
content: "";
opacity: 0;
}