Question

我想在悬停时延迟显示工具提示。我似乎能够推迟它们消失，但我想要完全相反。我希望他们在悬停时显示1秒，但在不再悬停时立即消失

以下与我想要的效果完全相反

core-tooltip /deep/ * {
  transition: visibility 1s;
}

Answer 1

为元素创建延迟的CSS3过渡需要transition-delay属性。

Live demo演示了一秒延迟后显示的工具提示。如果链接未保存，请在下方输入。

<link rel="import" href="../core-tooltip/core-tooltip.html">

<polymer-element name="my-element">

  <template>
    <style>    
      #span {
        border: 1px solid blue;
        padding: 10px;
        width: 280px;
        height: 130px;
      }
      #core_tooltip {
        width: 90px;
        height: 30px;
        left: 660px;
        top: 290px;
        position: absolute;
      }
      core-tooltip.special:hover::shadow .core-tooltip, core-tooltip.special:focus::shadow .core-tooltip {
        opacity: 1;
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
        transform: translate3d(0px, 0px, 0px);
      }
    </style>
    <core-tooltip label="I'm a tooltip" id="core_tooltip" class="special">
      <span id="span">Delay for a second</span>
    </core-tooltip>
  </template>

  <script>

    Polymer({

    });

  </script>

</polymer-element>

聚合物核心 - 工具提示：转换可见性

1 个答案: