6

我正在使用Polymer制作网站。我目前在使用paper-ripple时遇到了一些问题。h2现在我遇到的问题是单击or时不会出现波纹h3，即使删除<div class='description'>-tag 并且它正在关闭选项卡也是如此。查看 的大小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>

编辑：

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

4

3 回答 3

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>
于 2015-04-18T04:32:13.780 回答
1

尝试给包含 div “album-header” 一个 “position: relative” 这解决了我的问题：

.album-header {
    position: relative;
}

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

于 2015-07-23T11:25:58.153 回答
0

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

paper-ripple{
    z-index:10;
}

这是JSBin

于 2015-05-11T20:05:09.097 回答