Question

当我处理ul / li元素时，我遇到了一个奇怪的问题。

使用非常简单的html / css

＆＃13;

li {
  cursor: pointer;
}

li:hover {
  background-color: yellow;
}

li:focus {
  background-color: red;
  margin: 30px -20px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/>
<ul class="collection">
  <li class="collection-item" onclick="window.alert('Click on li collection')" tabindex="0">Item 1</li>
  <li class="collection-item"  onclick="window.alert('Click on li collection')" tabindex="0">Item 2</li>
  <li class="collection-item"  onclick="window.alert('Click on li collection')" tabindex="0">Item 3</li>
</ul>

＆＃13;

P.S。要尝试代码：https://jsfiddle.net/vcbmbjx0/，似乎代码段的CSS没有用。

我想要的是在li元素聚焦时改变边距，但似乎这个改变打破了click事件的发射。（当我单击项目1和项目2的中间时，不会触发单击，但会触发项目2的焦点效果...）

有人有什么想法吗？

Answer 1

焦点上的边距似乎是在点击发生之前将元素移开。

如果删除保证金，则可以：

.collection-item {
  cursor: pointer;
  &:hover {
    background-color: yellow;
  }
  &:focus {
    background-color: red;
    //margin: 30px -20px;  --> offending line
  }
}

https://jsfiddle.net/vcbmbjx0/2/

或鼠标按下如上所述：

https://jsfiddle.net/vcbmbjx0/3/

onclick on li没有触发，但li很专注

1 个答案: