html - 悬停和单击事件不适用于 内的

Question

我的 :hover 和 click 事件是否可以在按钮内的 span 上工作？目前什么都没有发生，大概是因为按钮功能优先。

如果将按钮转换为 div，则一切正常。但是 - 我没有这个选项。

有什么想法吗？

HTML:

<button>
<span>item 1 <i onclick="alert('1')">x</i></span>
<span>item 2 <i onclick="alert('2')">x</i></span>
<span>item 3 <i onclick="alert('3')">x</i></span>
</button>

CSS

i:hover{
    border:1px solid #fff;
}

https://jsfiddle.net/c72qd1o6/

Answer 1

不，没有办法，因为按钮标签只是文本的容器，不能在子元素上有任何事件。