Как я могу обменять свой образ на CSS?

Я создаю простую страницу «скоро», и для меня жизнь не может понять, как создать ссылку на изображение, которая, когда зависнет, изменится на другое изображение. Я трал Google и не могу найти ответ, который работает. Я угадываю, что у меня что-то неявное и упустил из виду. Я чувствую, что не вижу дерева для деревьев.Как я могу обменять свой образ на CSS?

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>

стилевой:

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

Я был бы признателен за любую помощь!

источник

2016-02-22 ZombieDude

Демонстрация с изображением (вы можете использовать фиктивные изображения с lorempixel.com) была бы более полезной здесь, я думаю, чем простой код. –

У вас есть элемент '' и 'background-image', оба, казалось бы, указывали на один и тот же файл изображения. В дополнение к ответам, вы можете посмотреть на '', который не будет меняться при наведении. –

хорошо catch @MikeMcCaughan. я сначала увидел место, ответил поспешно, затем увидел изображение и изображение на заднем плане. smh (не то, чтобы пространство не было значительным, просто не единственная проблема) – jay

Последний селектор в вашей таблице стилей, имеет место, которое заставляет его не работать. #info :hover должно быть #info:hover

источник

2016-02-22 20:52:17 jay

Как я могу обменять свой образ на CSS?

ответ

Смежные вопросы