#id:hover { background: no-repeat url(...);} not working?
Question
Hello here is my html code so far:
<!DOCTYPE html> <html lang = "fr"> <head> <meta charset="utf-8"/> <!-[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie6.css"/> <![endif]-> <link rel="stylesheet" type="text/css" href="tp1.css"/> <title>TP1::Acceuil</title> </head> <body> <div id = "banner"></div> <div id = "container"> <div id = "header"> <div id = "header_button_enregistrer" class = "header_button"></div> <div id = "header_button_identifier" class = "header_button"></div> </div> <div id = "contents"></div> <div class = "clearfooter"></div> </div> <div id = "footer"></div> </body> </html>
It's not finished so don't worry :) my problem lies in the header_button divs... Here is my CSS code:
html, body { height: 100%; } body { background: no-repeat url(background.jpg); background-size: cover; background-attachment: fixed; background-position: center center; background-color: #f2f2f2; } #banner { background: repeat url(banner_background.png) #f2f2f2; height: 158px; width: 100%; position: absolute; margin-top: -10px; margin-left: -10px; margin-right: -10px; z-index: 0; } #container { display: block; width: 980px; min-height: 100%; position: relative; margin-left: auto; margin-right: auto; margin-bottom: -99px; } #footer { background: repeat url(footer_background.png) #f2f2f2; height: 99px; position: relative; margin-left: -10px; margin-right: -10px; } #header { display: block; height: 158px; z-index: 0; } #contents { background-color: #5c7dad; border: 1px solid #5c7dad; position: relative; webkit-border-radius: 5px; moz-border-radius: 5px; border-radius: 5px; } #header_button_enregistrer { background: no-repeat url(banner_button1.png); background-position: -135px 0px; } #header-button-enregistrer:hover { background-image: no-repeat url(banner_button.png); background-position: -135px -39px; } #header_button_identifier { background: no-repeat url(banner_button1.png); background-position: 0px 0px; margin-left: 20px; } #header-button-identifier:hover { background-image: no-repeat url(banner_button1.png); background-position: 0px -39px; } .clearfooter { height: 99px; clear: both; } .header_button { cursor: pointer; height: 39px; margin-top: 15px; width: 135px; float: left; }
I am using the same image for each button, here's a sneak peak:
And here is what the page looks like :):
As you can see, both buttons show up properly. The main problem is that I want the grey ones to appear when I hover over them... but they don't and I don't understand why... seems to me like my code is fine. Anyone has a clue??
1 answers
solution1
0 ACCPTED 2021-10-13 18:46:53
也许是因为你在这里有一个错字……你在 HTML 中用下划线定义了你的 ID，在 CSS 中你用“-”来称呼它
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.