描述模块

注意：

此页为于sgtz的个人站内部所使用的组件页面。该页面内容可在其它页面中被使用或引用。

这是什么？

本组件用于实用链接页面。

如何使用

你只需要在需要的页面中引入如下代码：

[[include :sgtz:component:description-module]]

然后就可以使用以下语法来使用本组件：

[[span class="hover-text"]]悬停在这里[[span class="description"]]然后你就可以看到这一段话[[/span]][[/span]]

效果如下：

悬停在这里然后你就可以看到这一段话

源代码

这里是组件的源代码：

.hover-text {
    display: inline;
    position: relative;
    vertical-align: top;
}
 
.hover-text .description {
    display: none;
    position: absolute;
    top: 100%;
    background: white;
    border: 1px solid gray;
    padding: 5px;
    width: 150px;
    z-index: 9999;
}
 
.hover-text:hover .description {
    display: block;
}
 
@media (max-width: 768px) {
 .hover-text .description {
     width: 140px;
 }
}
 
@media (min-width: 769px) {
 .hover-text .description {
     width: 200px;
 }
}