Question

我有一个聚合物元素，它是一堆图像，需要在悬停在堆栈上时展开并显示每个图像。如果保持不动，它应该看起来像这样：

在悬停时，堆栈会垂直扩展。

元素的代码是（do-profile-pic是放下每个图像的另一个元素）：

<polymer-element name="do-profile-pic-stack" attributes="images">
    <template>
    <style>...</style>
      <div class="stack-container"
           on-mouseover='{{onHovered}}'
           on-mouseout='{{onUnhovered}}'>
        <template repeat="{{picture, i in images}}">
          <div class="stack-img-container"
               /* the stack is angled so bit of every image is visible */
               style="top: {{5 * i}}; z-index: {{10 - i}}">
            <do-profile-pic imgurl="{{picture.url}}" showtime="false">
            </do-profile-pic>
          </div>
        </template>
      </div>
  </template>
  <script>
    Polymer('do-profile-pic-stack', {
      images: [],
      ...
    });
  </script>
</polymer-element>

现在我环顾四周，似乎有两种方法可以做到这一点。一种是使用聚合物选择器。另一种是使用用户事件方法。我没有使用任何这些方法来实现默认的角度布局（上面的注释）。要垂直扩展堆栈，我必须使用定位和布局，但我似乎无法想出实现这一点的好方法。

聚合物选择器看起来很复杂。以编程方式，看起来需要使用HTMLElement。我可以做到这一点，但angular-js处理得更好。那么有没有更好的方法可以解决这个问题呢？感谢。

Answer 1

如果你想在鼠标悬停时改变外观，我想你可以使用纯CSS解决方案，它有两套样式，一套是正常的，一套是鼠标悬停的。

stack-img-container {
  // normal style here
}

stack-img-container:hover {
  // mouse-over style
  // overrides and extends normal style
}

并将其放在您的样式标记中（而不是点...）。

Answer 2

使用Element.classList动态更改班级。

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>

<my-app></my-app>
  
<polymer-element name='my-app'>
  <template>
     <style>
       .hovered {
         background-color:red;
       }
     </style>
    <span on-mouseenter='{{onHover}}' 
            on-mouseleave='{{onUnhover}}'>
      Mouse over me, please.
    </span>
  </template>
  <script>
    Polymer('my-app', {

      onHover: function(e) {
        e.srcElement.classList.add('hovered'); 
      },

      onUnhover: function(e) {
        e.srcElement.classList.remove('hovered');
      }
    })
  </script>
</polymer-element>

注意：

Event.srcElement不符合标准，不适用于每个用户。
引用Polymer元素中元素的标准方法是Polymer.Base $$(slctr)：

此$$（ '跨度'）classList.add（ '盘旋'）;

它适用于我的项目，但不在此代码段中。
上述代码是从Peter Burns'

How can I handle a hover the Polymer way without external libraries?

在事件处理程序中onHover周围的大括号不应该是必需的，但是，它们在此代码段中不起作用。不确定是否因为使用了聚合物的版本。我试图链接到最新但失败了。
以下是使用普通javascript动态更改类的demo。

如何在聚合物中动态更改CSS？

2 个答案: