css - 在 Wordpress 中创建 CSS 悬停图像

Question

我有一个网站 here ...

当您查看此页面时，您会看到一个评论气泡的图像...

这是附加到该评论气泡的 CSS...

#content .postmetadata .comments {
 background-image:url(images/comment.png);
 background-repeat:no-repeat;
 position:absolute;
 bottom:8px;
 height:25px;
 *bottom:18px;
 margin-left:8px;
}

我想做的是，默认情况下，您会看到那里的图像...(它是黑色的，不透明度约为 50%)。

当您将鼠标悬停在它上面时，图像会变成红色，但背景会保持透明，因此只有气泡会改变颜色。

我已经准备好红色图像，或者我可以用 CSS 做些什么？

这有意义吗？

Answer 1

我认为您正在尝试对我的社交媒体链接执行我网站上的操作。

我将它设置为 Sprite : http://michelenarup.com/wp-content/themes/Portfolio/images/social.png

并且代码将更改悬停状态的背景位置:

    #facebook{background-position: -100px 0px; float:left; height:50px; width:50px; padding:0; background-image: url('../images/social.png'); margin-bottom: 10px;}
    a#facebook:hover{background-position: -100px -50px; outline:none;}

---编辑---

    a.comments {
     background-image:url(images/comment.png);
     background-repeat:no-repeat;
     position:absolute;
     bottom:8px;
     height:25px;
     *bottom:18px;
     margin-left:8px;
    }


    a.comments:hover {
     background-image:url(images/comment-hover.png);
     background-repeat:no-repeat;
     position:absolute;
     bottom:8px;
     height:25px;
     *bottom:18px;
     margin-left:8px;
    }