先把以下代码另存为 .HTML 网页，用浏览器打开，将鼠标移到文字上看看效果。 这段代码拿来就可以用，将<body>和</body>之间部分插入自己网页源码的同样位置就好了。 需要调整的地方是——当然首先是将显示文字和图片地址换成你自己的，其次，如果位置和大小不合适，相应调整 left: 55px 和 width="110" 两个定义偏移量和图片大小的参数，背景色和边框则是这两个参数：background-color: lightyellow 和 border: 1px solid silver
<title>鼠标经过效果</title>
</head> <body>
<style type="text/css"> .thumbnail{
position: relative;
z-index: 0;
} .thumbnail:hover{
background-color: transparent;
z-index: 50;
} .thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 1px;
left: -1000px;
border: 1px solid silver;
visibility: hidden;
color: black;
text-decoration: none;
} .thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
} .thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 55px; /*position where enlarged image should offset horizontally */ } </style>
<a class="thumbnail" href=链接>语文芳草地在这：www.ywfcd.com <span><img src="http://www.ywfcd.com/d/file/jiaoxueziyuan/tupiansucai/2008-07-15/0256c98879c26d30466388f21b197caa.gif" alt="图片在这" width="110" border="0"></span></a>
</body>
</html> |
|
