我有一个包含一些可点击元素的容器,在容器的底部,有一个渐变,我用 .container:after
添加它来创建淡入淡出效果。我仍然希望底部的元素可点击,但也会受到淡入淡出的影响,因此将淡入淡出放在可点击元素后面是行不通的。
http://jsfiddle.net/mwjj7hff/1/
HTML:
<div class="container">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
CSS:
.container {
border: 1px solid #ccc;
font-family: sans-serif;
height: 400px;
overflow: hidden;
position: relative;
width: 200px;
}
.container:after {
background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0%, white 100%);
bottom: 0;
content: " ";
height: 150px;
display: block;
position: absolute;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
cursor: pointer;
margin: 3px;
padding: 3px;
text-align: center;
}
li:hover {
background: #99d;
}
最佳答案
一个快速、简单的解决方案是添加 pointer-events: none
到伪元素。
这样做时,您实际上可以点击通过它:
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
.container:after {
background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0%, white 100%);
bottom: 0;
content: " ";
height: 150px;
display: block;
position: absolute;
width: 100%;
pointer-events: none;
}
浏览器对pointer-events
的支持可以是found here - 目前为 87.29%。
关于html - 通过容器蒙版单击按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29266338/