Question

我正在创建一个简单的“即将推出”页面，并且在我的生活中无法弄清楚如何创建一个图像链接，当悬停在其上时，会更改为另一个图像。我已经搜索了谷歌，但无法找到有效的答案。我猜我错过了一些显而易见的东西而忽略了它。我觉得我看不到树木了。

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

我将不胜感激任何帮助！

Answer 1

样式表上的最后一个选择器有一个空格，导致它无法工作。 #info :hover应为#info:hover

如何让我的图像交换在CSS中工作？

1 个答案: