polymer 在所有 child 身上泛起涟漪-6ren

polymer 在所有 child 身上泛起涟漪

转载作者：行者123 更新时间：2023-12-04 15:44:09

28

4

我正在使用 Polymer做一个网站。我目前在使用 paper-ripple 时遇到一些问题.现在我遇到的问题是点击 h2 时没有出现波纹。或 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>

编辑:

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

最佳答案

你只需要增加 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>

关于 polymer 在所有 child 身上泛起涟漪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24840780/

28

4

0

文章推荐： gcc - Nim 编译器失败并显示 "Requested command not found: gcc.exe"

文章推荐： sql - 数据库自增列

文章推荐： usb - USB 中断传输是否保证顺序？

文章推荐： asp.net - 将 .NET Framework 3.5 迁移到 4.5 时出错

hadoop - 如何将袋装在 pig 身上
Closed. This question needs details or clarity。它当前不接受答案。想改善这个问题吗？添加详细信息，并通过editing this post阐明问题。 4
css3 指针事件不在 child 身上？
我有followwing结构 some text Delete 是否可以使用指针事件禁用 div:除了保持按钮处于事件状态之外没有其他功能？我试过 div.offline:not(.delete)
css - 覆盖框阴影伪元素防止悬停事件发生在 child 身上
Here's my fiddle. 基本上我有一个父 div，需要在它周围有一个框阴影，由于各种原因，这个框阴影必须是一个伪元素。此框阴影会阻止捕获此父 div 的子项上的悬停事件。我该如何解决这个问
jenkins - Cypress 有时会卡在 Jenkins 身上
Cypress 在 Jenkins 中成功使用。从几周 Cypress 规范文件开始，它将永远挂起。它将卡在不同的规范文件中，这使得调试和查找失败的原因变得困难。有时它会成功运行所有规范文件。请帮帮我
jquery - mouseleave 在 parent 身上
我可能遇到了 DOM 和 jQuery 的问题。我有这个 HTML 结构: 140,86
ios - 导航 Controller - 导航栏未显示在 child 身上
我有 View Controller A 和 View Controller B。A 具有 B 的序列。A 嵌入在导航 Controller 中。导航栏在 A 上显示正常，但是在 B 上没有显示。我
html - 将固定元素覆盖在 Chrome 中不工作的亲戚 parent 身上
试图解决一个有趣的 CSS 问题。我正在尝试呈现一个最终必须位于相对父级(容器)内部的模态。我需要它是一个固定的叠加层，以便它覆盖整个视口(viewport)。下面包含的代码片段是为了简洁起见。 .
ios - 如何让一个自由下落的 Sprite 节点坐在另一个水平移动的 Sprite 身上
如何让一个自由落体的 Sprite 节点坐在另一个水平移动的 Sprite 体上？现在两个 body 都发生了碰撞。但是水平运动的物体偏离了它的路径，自由落体撞击水平物体后下降。如何修复 Sprit
css - 悬停在第 n 个 child 身上
我想知道是否可以像这样对第 n 个 child 使用悬停 #gallery a img:hover { display: block; height:300px; width:
html - 溢出隐藏在 flex child 的 child 身上
这个问题在这里已经有了答案: Why don't flex items shrink past content size? (5 个答案) 关闭 3 年前。我有一个带有 flex: 1 的 fle
css - 悬停在 child 身上，对 parent 没有悬停效果
这个问题在这里已经有了答案: How to style the parent element when hovering a child element? (8 个答案) 关闭 9 年前。所以我有
css - 悬停在 child 身上，对 parent 没有悬停效果
这个问题在这里已经有了答案: How to style the parent element when hovering a child element? (8 个答案) 关闭 9 年前。所以我有
javascript - 通过 javascript 将一个绝对定位的 child 集中到一个没有定位的 parent 身上
所以我的处境有点棘手。基本上我有这个可滚动的水平导航，它有一个 overflow-x: auto。导航具有与悬停时出现的下拉菜单的链接。溢出会阻止下拉列表在未将其位置设置为 absolute 的情况
css - 有没有可能在没有 parent 的情况下用 css 悬停在 child 身上？
在 css 中有什么方法可以只选择悬停的容器子而不需要父级，这可以用 css 实现吗？这就是我正在尝试的，应该选择最深的容器而不是我添加的 .decor 只是为了显示所选的 div。(这些 chil
php - Eloquent:在模型和他的 parent 身上 Hook 到 'saving' 事件
有这个 parent : class BaseModel extends Eloquent { protected static $rules = []; public static
c - 当我点击我的子窗口时，为什么我得到 WM_MOUSEACTIVATE？我让它把焦点转移到 parent 身上，这会搞砸 child 杀死焦点逻辑
我有一个用作编辑器 View 的自定义窗口类，并且由于我直接处理键盘事件，所以我希望在顶部有一个标准的编辑控件来输入文本。我的问题很简单:我也想在用户点击自定义窗口类时获取焦点，所以我处理 WM_MO

首页

博学

6Ren·AI

商城

polymer 在所有 child 身上泛起涟漪