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}}">

然后在处理程序函数中的setZ()元素上调用paper-shadow，如下所示：

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

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

将鼠标悬停在元素上时如何更改Google Polymer中的Z-depth属性？

1 个答案: