纯CSS实现点击图片触发select下拉框使之展开

  • Post author:
  • Post category:其他


如下图,下拉框最右边的箭头是一个图片,

代码为:

 <span class="rightRegion">客户<font color="#EA609D">*</font></span>
      <select name="advertiserId" required class="ipt">
        <option value="0">腾讯</option>
        <option value="1">阿里</option>
        <option value="2">百度</option>
      </select>
 <div class="iconfont icon-jiantou-copy-copy" id="select-jiantou"></div>


<style>
#select-jiantou{
	width: 16px;
	height: 16px;
	margin: 0;
	font-size: 14px !important;
	float: left;
	line-height: 34px;
	margin-left: -20px;
	cursor: pointer;
}
</style>

此时,点击箭头下拉框并没有反应,最初的想法是点击图片时触发下拉框的点击事件,

  $("#select-jiantou").click(function () {
        $(this).prev().click();
    })

发现可以拿到select这个对象,但是点击事件并没有触发成功。

最后发现,在select-jiantou的CSS中添加

pointer-events: none

,点击箭头便可展开下拉框。


pointer-events属性值详解


auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。

none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。



版权声明:本文为animatecat原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。