Question

我使用Polymer制作网站。我目前在paper-ripple遇到了一些问题。现在我遇到的问题是，点击h2或h3时，即使删除了<div class='description'> - 标签，它也不会出现涟漪，并且＆＃39;关闭标签。查看paper-ripple的大小，它涵盖了整个<div class='album-header'>，因此不应该成为问题。

此外，在填充区域中的<div class='description'>下方点击也会出现波纹。

<div class="album-header" vertical layout on-tap="{{albumTapped}}">
    <paper-ripple class="recenteringTouch" fit></paper-ripple>
    <content select="img"></content>
    <div class="description">
        <content select="h2"></content>
        <content select="h3"></content>
    </div>
</div>

修改

我已经做了一些进一步的测试，我已经缩小了问题范围。看看this示例。除非您还指定了不透明度，否则将样式应用于子元素不会产生任何问题。在链接中给出的示例中，绿色文本已被赋予不透明度。单击此文本不会为我生成涟漪（在Chrome 36中运行）。（绿色的分配与它无关，只是为了更容易发现）。单击<h3>标记周围的任何位置都会发生纹波。

Answer 1

您必须在外部容器上增加z-index，因此所有<content>都会低于它。例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel='import' href='http://www.polymer-project.org/0.8/components/paper-ripple/paper-ripple.html'>
  <script>console.clear()</script>
</head>
<body>
<style>
  album-small {
    width: 200px;
    margin: 10px;
  }
</style>

<div layout horizontal>
  <album-small>
    <h2>The Shatner</h2>
    <h3>An interminable rambling spoken word piece.</h3>
  </album-small>
  <album-small>
    <h2>What</h2>
    <h3>What wat what wat what what wat</h3>
  </album-small>
</div>
<polymer-element name='album-small' noscript>
<template>
  <style>
    .album-header {
      /* Note: relative positioning seems necessary
         for paper-ripple. */
      position: relative; 
      padding: 10px;
      height: 200px;
      z-index: 100;
    }
  </style>
  <div class="album-header" vertical layout>
    <paper-ripple class='recenteringTouch' fit></paper-ripple>

    <content select="img"></content>
    <div class="description">
      <content select="h2">hi</content>
      <content select="h3">hi</content>
    </div>
  </div>
</template>
</polymer-element>

</body>
</html>

Answer 2

尝试将包含div的“album-header”设为“position：relative”，这解决了我的问题：

.album-header {
    position: relative;
}

在此问题中找到了此解决方案：http://goo.gl/a3qccA

Answer 3

看起来可以轻松修复增加纸张波纹本身的z-index，只需将其放入聚合物元素样式标签中：

paper-ripple{
    z-index:10;
}

这是JSBin

聚合物波及所有儿童

3 个答案: