Home > Article > Web Front-end > html problem about adding floating label a on the picture

html problem about adding floating label a on the picture

伊谢尔伦Original: 2016-11-22 14:07:151772browse

The code is as follows:
HTML code:

<!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=&#39;images/leftbig.png&#39;></span>")
                                              }).mouseout(function(){
                                                  $(this).html("")
                                            })
               })
</script>
</head>
<body>
<div>
<div><img src="/uploads/201411/f94feeae3b52fd2bb9051d9e0bb70da21.jpg" width="500" height="300" /></div>
    <a href="#"></a>
    <a  href="#"></a>
</div>
</body>

Question: Move the mouse to the a tag and add an arrow image to the a tag. It is normal under Google, but there is no response under IE. How should I modify it?
The correct modified code is as follows:
CCS code:

<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(/uploads/201411/f94feeae3b52fd2bb9051d9e0bb70da21.jpg) no-repeat center center;}
.right{right:0; }
a.right:hover{background:url(/uploads/201411/f94feeae3b52fd2bb9051d9e0bb70da21.jpg) no-repeat center center;}
</style>

HTML code:

<div><img src="/uploads/201411/f94feeae3b52fd2bb9051d9e0bb70da21.jpg" width="500" height="300" /></div>
    <a href="#"></a>
    <a  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：Details of the tagNext article：Details of the tag

See more

html problem about adding floating label a on the picture

Related articles