banner
endercat

endercat

某个白嫖怪的分享博客 现已迁移到 https://endercat.eu.org 请前往该URL查看最新文章
bilibili
github
telegram

Using black bars on a blog

All code in this article is from Moegirlpedia

Introduction#

Black bar text refers to a default black bar that displays hidden text when the mouse hovers over it.

Example#

Text

Usage#

Place the following code in the CSS of the page:

.heimu, .heimu a, a .heimu, .heimu a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
    color: white !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
    color: lightblue !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu {
    color: #BA0000 !important;
}

To achieve the black bar effect, simply add the following code: place <span class="heimu" title="Text displayed when hovering over the black bar"> before the target text, and add </span> after the target text. This way, the target text will be covered by a black semi-transparent background, creating the black bar effect.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.