当我悬停在我的元素上时，如何改变Google聚合物中的Z深度属性？

Question

下面的代码是我试图改变聚合物Z深度的纸阴影元素时，用户盘旋在纸阴影元素。然而，这不起作用，我也不知道为什么，我不认为它会起作用。

<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/core-image/core-image.html">
<link rel="import" href="../components/paper-shadow/paper-shadow.html">
<polymer-element name="chip-card">

    <template>
        <style>
        #paper_shadow{
            position: absolute;
            display: inline-block;
            font-family: 'Roboto', sans-serif;
            font-size: 12px ; 
            color: white;
        }
        #chip_body{     
            height: 400px; 
            width: 300px; 
            background-color: aqua;
            color: black;
        }
        #chip_top{
            background-color: deeppink;
            background-image: url(http://www.lirent.net/wp-content/uploads/2014/10/Android-Lollipop-wallpapers-p-800x500.png);
            background-size: cover;
            background-position: center center;
            width: 100%;
        }
        #chip_bottom{
            background-color: #fbfbfb;
            width: 100%;
            height: 10%; 
            position: relative;
        }
        #chip_bottom h1{
            font-size: 2em; 
        }
        #chip_bottom p{
            font-size: 1em;

        }

        </style>

        <paper-shadow z="1" id='paper_shadow' bind={{cardShadow}}>

                <div id="chip_body" vertical layout center justified>
                    <div id="chip_top" flex>

                    </div>
                    <div id="chip_bottom">
                        <content select="#chip_bottom"></content>

                    </div>
                </div>

        </paper-shadow>


    </template>

        <script>

        Polymer('chip-card',{

            cardShadow : function(){
                this.setZ = 4;
            }



        });

      </script>
</polymer-element>

Answer 1

setZ()是一个函数，它属于paper-shadow元素。

首先声明鼠标事件的事件处理程序绑定：

<paper-shadow z="1" id="paper_shadow" 
    on-mouseover="{{raise}}" 
    on-mouseout="{{lower}}">

然后在处理程序函数中对paper-shadow元素调用paper-shadow，如下所示：

raise: function(){
  this.$.paper_shadow.setZ(4);
},

lower: function(){
  this.$.paper_shadow.setZ(1);
}