與徽標懸停的CSS背景圖像

Hiall，我遇到問題。我必須在畫面上的菜單上添加懸停圖像。我知道我必須爲菜單中的每個項目創建一個特殊的圖片，但我應該如何將它添加到style.css？請給我一個答案與徽標懸停的CSS背景圖像

網絡來進行測試：

tee.jecool.net

圖像： enter image description here 菜單項-2

菜單項，14

menu-item-21

菜單項-26

菜單項-391

菜單項-23

菜單項-28

2014年2月28日 - 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; 
}

是這個問題，因爲我在菜單中選擇另一個懸停？（紅色發球杯效果）？我必須在artisster模板中關閉這個功能嗎？之後這寫到style.css？我如何編碼準確的位置？這是「＃menu-item-2 a：hover ...」正確嗎？

2014年3月3日=

嗨，我在這一點的工作，最後我取得一些進展:-)。這裏是我現在的測試網站= 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; 
}

而且我必須創建所有菜單項的特殊圖片按鈕？我的意思是menu-item-2，14，21等？這個代碼看起來如何？請求答覆。謝謝：-）。

我想學這麼多！請讓我知道！謝謝。 你想我的style.css或HTML上傳？對不起我的EN。

來源

2014-02-28 user3366349

您能否詳細解釋一下您的需求，並告訴我們您的HTML？另外，你到目前爲止嘗試過什麼？ –

如果所有的人都可以簡單的寫規則爲錨（如果你可以修改HTML）：

#menu a { 
    background-image: none; 
} 

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

也許你會需要改變一些填充/保證金創造一個很好的效果。

如果您不能修改html文件...只需爲所有這些文件編寫規則。

來源

2014-02-28 20:20:33 user3363963

感謝您的回答。我把它放在style.css中，並更改圖片的url，但沒有任何更改... – user3366349

我必須把這段代碼放到style.css或其他地方嗎？究竟在哪裏？我把它放在style.css中，但沒有任何改變。你能否懇求給我更多具體的信息？很抱歉，但我在這個CSS中不太好。 - user3366349 – user3366349

也許它不會改變，因爲路徑圖像不好。你的html文件在哪裏？你的CSS文件在哪裏？和你的圖像在哪裏？ – user3363963

一些基礎入手：

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

來源

2014-02-28 20:20:55 Bobby

與徽標懸停的CSS背景圖像

回答

相關問題