在翱翔的CSS背景图象与商标

Question

Hiall， 我有个问题。我必须在菜单上添加悬停图像，如图片所示。我知道我必须为菜单中的每个项目创建一个特殊的图片，但我应该如何将它添加到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恤杯效果）？我必须在artisster模板中关闭吗？之后写这个到style.css？我如何编码准确的位置？这是＆＃34;＃menu-item-2 a：hover ...＆＃34;正确的吗？

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,24,21等？怎么看这段代码？请求回答。谢谢： - ）。

我想要学到这么多！请求告诉我！谢谢。 您希望我的style.css或html上传某个地方吗？对不起我的不良EN。

Answer 1

如果所有这些都是锚点，你可以简单地编写一个规则（如果你可以修改html）：

#menu a {
    background-image: none;
}

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

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

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

Answer 2

一些基础开头：

http://jsfiddle.net/f9ncq/

<强> HTML

<div>
<ul>
    <li>
        <img src="https://wiki.debian.org/htdocs/debwiki/img/openlogo-50.png" />
        aaaaa
    </li>
    <li><img src="https://wiki.debian.org/htdocs/debwiki/img/openlogo-50.png" />
        bbbb</li>
</ul>

<强> CSS

ul li img {
    display: none;
}

ul li:hover img {
    display: inline;
}