Question

就像标题所说我想在我的wordpress网站中的某些（不是全部）用户旁边添加“天赋”。非常类似于reddit的用途，但更多地用于YouTube添加“已验证”用户的方式（基本上我将使用它）。

YouTube＆amp; Reddit示例 - http://imgur.com/a/tPHjh

我有用于悬停的CSS因此它会改变颜色，但我不知道如何让它保持在文本/用户名的右侧。

CSS

#verified {left: 10px; width: 9px;}
#verified {background: url(verifieds.png) 0 0;}
#verified:hover {background: url(verifieds.png) 0 -9px;}

HTML

<p id="verified">test</p>

结果是这样给我：http://jirachi.net/hover/hover.html但是改变的徘徊有些作用。谢谢你的帮助！

Answer 1

您可以试试这个，see demo.

#verified {
    padding: 0 5px 0 0;
    width:35px;
    height:18px;
    background: url(http://jirachi.net/hover/verifieds.png) no-repeat right center;
    cursor:pointer;
}

#verified:hover {
    background: url(http://jirachi.net/hover/verifieds.png) repeat-y right -9px;
}

Answer 2

所以在用户悬停在验证后你想让背景保持0 -9px？如果是这样的话，只需添加

#verified:active,

<＃>之前#verified：hover

在某些wordpress用户名旁边添加“flair”

2 个答案: