Question

我不是设计师，但今天我正在用css进行实验

我的问题是我想使用css在我的网页上显示图像，例如Here a link

http://gsg.com.au/solutions/six-drivers-of-sustainable-growth-healthy-brands

这是我的示例代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
            "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups 2</title>
<style type="text/css">
<!--
body {position: relative; background: black; margin: 0; padding: 0;}

div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background:;
   border-right: 5px solid #505050;}
div#links #whl1 a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}

div#content {position: absolute; top: 26px; left: 161px; right: 25px;
   color: #BAA; background: #22232F; 
   font: 13px Verdana, sans-serif; padding: 10px; 
   border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}

h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right;background: #00ff00 url('wheel01.png') no-repeat fixed center;
; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:visited {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:link:hover {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:visited:hover {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
code, pre {color: #EDC; font: 110% monospace;}
-->
</style>
</head>
<body>

<div id="links">
<a id ="whl1"><img src="wheel01.png" ></a>
<a id ="whl2"><img src="wheel02.png"></a>
<a id ="whl3"><img src="wheel03.png"></a>
<a id ="whl4" ><img src="wheel04.png"></a>
<a id ="whl5"><img src="wheel05.png"></a>
<a id ="whl6"><img src="wheel06.png"></a>
</div>

</div>


</body>
</html>

但它不适合我，请建议我他们如何做一些例子或想法谢谢

Answer 1

使用hover伪类。

#foo {
  background-image: url('not-hovered.png');
}

#foo:hover {
  background-image: url('hovered.png');
}

Answer 2

<div id="links">
  <a id ="whl1"></a>
</div>

#links a{
  width:123px;
  height: 123px;
  background: url("your_normal_image.jpg") no-repeat; 
  display: block;}

#links wh11{
  width:123px;
  height: 123px;
  background: url("your_HOVER_image.jpg") no-repeat; }

从HTML中删除<img>

Blasteralfred的ans也是R8，但在这种情况下我们无法改变图像，我们可以设置当前图像的不透明度

Answer 3

在这里 - 一个有效的例子：http://jsfiddle.net/kKLKC/

HTML（简而言之）：

<p><a class="blue" href="http://www.icanhascheezburger.com"></a></p>

请注意，该标记已从HTML标记中删除。

CSS：

a.blue { display:block ;
    width:151px ;
    height:180px ;
    background:url("http://www.digitaldemo.net/blue-bunny.png") no-repeat ;
}

a.blue:hover { background:url("http://www.digitaldemo.net/pink-bunny.png") no-repeat ;
}

您需要为每个链接执行CSS集（a.classname和a.classname：hover）。

使用css在悬停时更改图像

3 个答案: