悬停时带有 Logo 的 CSS 背景图片

Question

希尔，我有个问题。我必须像图片中那样在菜单上添加悬停图像。我知道我必须为菜单中的每个元素创建一张特殊图片，但我应该如何将它添加到 style.css？请给我一个答案

测试网站:

tee.jecool.net

图片: 菜单项 2

菜单项 14

菜单项 21

菜单项 26

菜单项 391

菜单项 23

菜单项 28

28.2.2014 - 23:08 =

感谢大佬们的解答!我不擅长CSS。我只教一些基础知识。我从 Artisteer 制作的这个网站和一些 html 更改 + css 更改。

我在另一个网站上找到这段代码，我想这就是我想要的，但它不起作用:

 #menu-item-2 a:hover {
    background: url(http://www.tee.jecool.net/wp-content/uploads/2014/02/Dotaz_css_hover_image.png) no-repeat;
}

这个问题是因为我在菜单中有另一个悬停吗？ (红色 T 恤杯效果)？我必须在艺术家模板中关闭它吗？然后将其写入 style.css？我如何编码准确的位置？这个“#menu-item-2 a:hover...”正确吗？

3.3.2014 =

嗨，我在这方面做了一些工作，最后我取得了一些进展:-)。这是我现在的测试网站 = buh.jecool.net。现在悬停显示我的黑色按钮。但是他更改了菜单并将菜单中的文本拉开。这个怎么编辑代码现在看:

ul.art-hmenu>li>a:hover, 
.desktop ul.art-hmenu>li:hover>a {
   color: #D41217;
   text-decoration: none;
   height: 99px;
   width: 83px;
   background: url(http://www.tee.jecool.net/wp-content/uploads/2014/03/Menu_hover_blog.png) no-repeat;
} 

我必须为所有菜单项创建特殊图片按钮吗？我的意思是菜单项 2、14、21 等？这段代码看起来怎么样？请给予答复。谢谢 :-)。

我好想学这个!请给我 clou!谢谢。 你想把我的 style.css 或 html 上传到某个地方吗？抱歉我的英文不好。

Answer 1

如果它们都是 anchor ，您可以简单地编写一个规则(如果您可以修改 html):

#menu a {
    background-image: none;
}

#menu a:hover {
    background: url('/images/my_background_image.jpg') top left no-repeat;
}

也许您需要更改一些填充/边距以创建一个不错的效果。

如果您不能修改 html 文件...只需为所有文件编写规则。