Home >Web Front-end >HTML Tutorial >图片上面加浮动标签a,鼠标移动到a标签加图标_html/css_WEB-ITnose
图片上面加浮动标签a,鼠标移动到a标签加图标_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:37:342289browse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="textml; charset=utf-8" /><title>无标题文档</title><style type="text/css">.box{ width:500px; height:300px; border:5px solid #00F;position:relative;}.left,.right{display:block;top:0;width:50px; height:300px;position:absolute;}.left span,.right span{position:relative;}.left{left:0;}.right{right:0;}.right{ float:right;}</style><SCRIPT type=text/javascript src="http://d.lanrentuku.com/down/js/xiangce-848/js/jquery.js"></SCRIPT><script type="text/javascript"> $(function(){ $(".left,.right").mouseover(function(){ $(this).html("<span><img src='images/leftbig.png' alt="图片上面加浮动标签a,鼠标移动到a标签加图标_html/css_WEB-ITnose" ></span>") }).mouseout(function(){ $(this).html("") }) })</script></head><body><div class="box"><div><img src="http://d.lanrentuku.com/down/js/xiangce-848/images/42813100.jpg" style="max-width:90%" style="max-width:90%" / alt="图片上面加浮动标签a,鼠标移动到a标签加图标_html/css_WEB-ITnose" ></div> <a class="left" href="#"></a> <a class="right" href="#"></a></div></body> 鼠标移运到a标签，给a标签添加一个箭头图片。
在谷歌下面是正常的，ie下面就没反应了。
请高人指点一下
回复讨论(解决方案)
怎么没人回呀
如果你想使一个没有内容的a标签上display:block;
尝试 在.left,.right 添加一个空背景图片，如：background-image:url(about:blank);
或者你可以在a里添加文字
left
right
然后用 .left,.right{text-indent:-3000px;}文字位置偏移3000个像素，超过屏幕显示范围而不被显示。
<style type="text/css">.box{ width:500px; height:300px; border:5px solid #00F;position:relative;}.left,.right{display:block;top:0;width:50px; height:300px;position:absolute; z-index:99; background:url(一张透明图片.png) repeat;}.left span,.right span,.img{position:relative;}.img{ z-index:10;}.left{left:0;}a.left:hover{background:url(http://d.lanrentuku.com/down/js/xiangce-848/images/42813100.jpg) no-repeat center center;}.right{right:0; }a.right:hover{background:url(http://d.lanrentuku.com/down/js/xiangce-848/images/42813100.jpg) no-repeat center center;}</style>
<div class="img"><img src="http://d.lanrentuku.com/down/js/xiangce-848/images/42813100.jpg" style="max-width:90%" style="max-width:90%" / alt="图片上面加浮动标签a,鼠标移动到a标签加图标_html/css_WEB-ITnose" ></div> <a class="left" href="#"></a> <a class="right" href="#"></a></div>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：(分享)30多套div+css后台模板打包下载-提供演示_html/css_WEB-ITnoseNext article：如何解决DIV占用另一DIV空间问题_html/css_WEB-ITnose