CSS3 Pointer-events 实战小用法

pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。
来自网络解释

1.点击curencies之前设置侧边栏mshe-sidebar类以下属性为
默认隐藏curencies之后要显示的内容区即以下display:none

<style>
    .currencies{
        display: none;
    }
    .mshe-sidebar{
        visibility: visible;
        pointer-events: auto;
    }
</style>

image.png

效果为以上显示图片即侧边栏页面内容更换
2.挂载点击事件触发事件
如以下

<script>
        /**choose currencies page*/
        $('.j-show-select-ctn-curr').click(function () {
            $('.currencies').css({
                'display': 'block',
            });
        })
        /***close currencies page***/
        $('.close-select-ctn').click(function(){
            $('.currencies').css({
                'display': 'none',
            });
        });
</script>
//主要HTML
<!--遮罩层-->
 <div class="backdrop">
       <img src="//www.web.com/dist/images/shoip-132456.png">
 </div>
<!--侧边栏主体-->
  <div class="mshe-sidebar">
        <div class="sidebar-list sidebar-nav-list">
            <ul class="sidebar-item">
                 <!--其他的选择项-->
                 <li class="j-show-select-ctn-curr"><a>Funny</a></li>
                 <li class="j-show-select-ctn-curr">
                  <a href="####">{:__('CURRENCY')}</a>
                      <div class="select-right">
                       <span class="currency-title">{$this_currencies.currencies_name}</span>
                        <i class="iconfont icon-right"></i>
                      </div>
                 </li>
            </ul>
        </div>
   </div>
    <div class="currencies mshe-sidebar">
        <div class="sidebar-select-title">
            <i class="iconfont icon-back close-select-ctn"></i>
            {:__('Currencies')}
        </div>
        <div class="sidebar-select-list">
            <ul class="diy-change-currencies">
                {foreach $currencies as $val}
                <li data-index="{$val.currencies_id}">
                    <img src="{$val.currencies_icon}" class="lzay " data-original="        
                    {$val.currencies_icon}"style="width:.64rem;height: .48rem;" >
                    &nbsp;{$val.currencies_name}
                    {if $this_currencies.currencies_name == $val.currencies_name}
                        <i class="iconfont icon-dagou1"></i>
                    {/if}
                </li>
                {/foreach}
            </ul>
        </div>
    </div>

CSS3 Pointer-events 实战小用法

推荐阅读更多精彩内容