Html 如何在不禁用元素的情况下使指针事件通过元素？

因此，我有一个完整的列表项，我想点击，但其中有需要点击的链接。结果是你不能嵌套

文本

相反，为了实现所需的行为，您可以将整体放置在一个

相对的
容器中，容器的
宽度和
高度固定，如图所示。并对其应用
悬停
效果，而不是
列表链接


.container{
位置：相对位置；
高度：100px；
宽度：100px；
背景：rgba（255,0,0,0.4）；
}
.容器：悬停{
背景：rgba（255,0,0,0.8）；
}
#列表链接{
/*高度：100px；
宽度：100px*/
排名：0；
底部：0；
左：0；
右：0；
位置：绝对位置；
/*背景：rgba（255,0,0,0.4）*/
}
/*
#列表链接：悬停{
背景：rgba（255,0,0,0.8）；
}*/
#列表项{
/*高度：100px；
宽度：100px*/
排名：0；
底部：0；
左：0；
右：0；
位置：绝对位置；
z指数：10；
指针事件：无；
}
#儿童链接{
背景：rgba（0,0,255,0.4）；
指针事件：自动；
}
#childlink:悬停{
背景：rgba（0,0,255,0.8）；
}

文本
相反，为了实现所需的行为，您可以将整体放置在一个
相对的
容器中，容器的
宽度和
高度固定，如图所示。并对其应用
悬停
效果，而不是
列表链接


.container{
位置：相对位置；
高度：100px；
宽度：100px；
背景：rgba（255,0,0,0.4）；
}
.容器：悬停{
背景：rgba（255,0,0,0.8）；
}
#列表链接{
/*高度：100px；
宽度：100px*/
排名：0；
底部：0；
左：0；
右：0；
位置：绝对位置；
/*背景：rgba（255,0,0,0.4）*/
}
/*
#列表链接：悬停{
背景：rgba（255,0,0,0.8）；
}*/
#列表项{
/*高度：100px；
宽度：100px*/
排名：0；
底部：0；
左：0；
右：0；
位置：绝对位置；
z指数：10；
指针事件：无；
}
#儿童链接{
背景：rgba（0,0,255,0.4）；
指针事件：自动；
}
#childlink:悬停{
背景：rgba（0,0,255,0.8）；
}

文本
This:
#listitem{background:rgba（255，0，0，0.4）}#listitem:hover{background:rgba（255，0，0，0.8）}#childlink{background:rgba（0，0，255，0.8）}
似乎不用额外的
代码就可以完成这项工作。
listitem:hover{background:rgba（255，0，0，0.8）}childlink{background:rgba（0，0，255，0.4）}childlink:hover{background:rgba（0，0，255，0.8）}
似乎不用额外的
就可以完成这项工作了，我甚至已经有了一个容器，所以我只是把悬停从背景链接移到了容器上，效果非常好。是的，我甚至已经有了一个容器，所以我只是把悬停从背景链接移到了容器上，效果非常好。