0

我这里有一个网站...

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

这是附加到该评论气泡的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 做些什么？

那有意义吗？

4

3 回答 3

2

我认为您正在尝试为我的社交媒体链接做我在我的网站上所做的事情。

我将它设置为精灵： 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;
    }
于 2013-09-09T18:17:22.963 回答
1 
   #content .postmetadata .comments:hover {
   background-image:url(images/yourredimage.png);
   background-repeat:no-repeat; position:absolute; bottom:8px;
   height:25px;
   *bottom:18px;
   margin-left:8px;
   }
于 2013-09-09T18:29:45.970 回答
0

有一个插件可以做到这一点。看看wp-visual-slide-box-builder

于 2014-02-19T03:17:33.593 回答