How can I get my image swap to work in CSS?
Question
I am creating a simple "coming soon" page and for the life of me cannot figure out how to create an image link that, when hovered over, changes to another image. I've trawled google and cannot find an answer that works. I am guessing I am missing something obvious and have overlooked it. I feel like I can't see the wood for the trees.
Html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ablockalypse</title>
<meta name="description" content="Ablockalypse">
<meta name="author" content="Coming Soon">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="container">
<img src="images/cityscape.png">
<div id="header">
<img src="images/banner.png">
</div>
<div id="logo">
<img src="images/Logo.png">
</div>
<div id="info">
<a href="index.html"><img src="images/info_red.png"></a>
</div>
</div>
</body>
</html>
Stylesheet :
body {
background-color: #746747
}
#container {
position: relative;
width: 800px;
height: auto;
display: block;
margin: auto;
max-width: 100%;
width: auto\9; /* ie8 */
}
#header {
position: absolute;
top: 20px;
left: 6%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#logo {
position: absolute;
top: 40%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
-ms-transform: rotate(13deg); /* IE 9 */
-webkit-transform: rotate(13deg); /* Chrome, Safari, Opera */
transform: rotate(8deg);
}
#info {
position: absolute;
top: 450px;
left:290px;
width: 276px;
height: 134px;
background-image: url(images/info_red.png) no-repeat;;
}
#info :hover {
background-image: url(images/info_green.png) no-repeat;;
}
I would appreciate any help!
1 answers
solution1
0 2016-02-22 20:52:17
the last selector on your stylesheet, has a space that is causing it not to work. #info :hover should be #info:hover
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.