美文网首页
Callout 标注气泡

Callout 标注气泡

作者: buershero | 来源:发表于2016-11-30 15:46 被阅读0次

点击/鼠标移入元素,弹出气泡式浮层。

我发现这个可以被维护为一个UI小组件,好用!此处重点提到inherit,对于伪元素来讲,会取生成该伪元素的宿主元素。我们不需要在DOM层面写三角箭头标签,直接用after来实现,如果有改动也很容易 我们只需要修改父级的样式,方便快捷 666^-^

例子如下:

```

.c{

  position:relative;

  padding:10px;

  width:200px;

  border-radius:4px;

  background-color:#d9f5ff;

  line-height:1.5;

  border:1px solid #d5e8ff;

  &:after{

    content:"";

    position:absolute;

    top:-.4em;

    left:1em;

    padding:.35em;

    color:inherit;

    border:inherit;

    background-color:inherit;

    border-right:0;

    border-bottom:0;

    transform:rotate(45deg);

  }

}

```

相关文章

网友评论

      本文标题:Callout 标注气泡

      本文链接:https://www.haomeiwen.com/subject/xadtmttx.html