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

我认为您正在尝试使用我的网站上的社交媒体链接。

我把它设置为精灵： 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;
    }

Answer 2

   #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;
   }

Answer 3

有一个插件可以执行此操作。查看wp-visual-slide-box-builder

在Wordpress中创建CSS悬停图像

3 个答案: