火狐不支持webp格式的图片


<!DOCTYPE html>
<html lang="en">
<style>
ul{list-style: none;}

li{float: left;margin-left: 20px;
}
li a{display: block;border:2px solid #ccc;}
#tooltip2{
        position: absolute;
}
#tooltip{
    position: absolute;
    border:2px solid #ccc;
    width: 300px;height: 300px;
}
</style>
<head>
    <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> 

    <title>Document</title>
    <!-- <script type="text/javascript">
    jQuery(document).ready(function($) {
        var x=10;
        var y=20;
        $('a.tooltip').mouseover(function(event){
            this.myTitle=this.title;
            this.title='';//取消a的title属性，从而不会显示默认的
       var tooltip='<div id="tooltip2">'+this.myTitle+'</div>';//把默认的赋值到鼠标移动上
       $('body').append(tooltip);
       $('#tooltip2').css({'top':(event.pageY+y)+'px',//event.pageY为当前鼠标的纵坐标
                 'left':(event.pageX+x)+'px'
   }).show('fast');
    }).mouseout(function(event){
        this.title=this.myTitle;
$('#tooltip2').remove(); 
//remove是删除节点，而removeAttr()是删除属性
    }).mousemove(function(event){
        $('#tooltip2').css({'top':(event.pageY+y)+'px',
                 'left':(event.pageX+x)+'px'
   });
    });
});

</script>
<body> -->
<script type="text/javascript">
jQuery(document).ready(function($) {
    var x=10;
    var y=20;
$('li a').mouseover(function(e){
    // this.myTitle=this.title;
    //         this.title='';
var ele=$('<div id="tooltip">'+this.title+'</div>');
$('body').append(ele);
$('#tooltip').css({'top':(e.pageY+y),'left':(e.pageX+x)}).show('fast');

}).mouseout(function(){
     // this.title=this.myTitle;
 $('#tooltip').remove();
}).mousemove(function(e){
$('#tooltip').css({'top':(e.pageY+y),'left':(e.pageX+x)}).show('fast');
});
});
</script>
</head>


<!-- <script type="text/javascript">
    jQuery(document).ready(function($) {
        var x=10;
        var y=20;
        $('a.tooltip').mouseover(function(event){
            this.myTitle=this.title;
            this.title='';//取消a的title属性，从而不会显示默认的
            var imgTitle=this.myTitle?'<br/>'+this.myTitle:'';
       var tooltip="<div id='tooltip2'><img src='"+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>";
       //把默认的赋值到鼠标移动上
       $('body').append(tooltip);
       $('#tooltip2').css({'top':(event.pageY+y)+'px',//event.pageY为当前鼠标的纵坐标
                 'left':(event.pageX+x)+'px'
   }).show('fast');
    }).mouseout(function(event){
        this.title=this.myTitle;
$('#tooltip2').remove(); 
//remove是删除节点，而removeAttr()是删除属性
    }).mousemove(function(event){
        $('#tooltip2').css({'top':(event.pageY+y)+'px',
                 'left':(event.pageX+x)+'px'
   });
    });
});

</script> -->

<p><a href="#" class='tooltip' title='这是我的超链接提示1.'>提示1.</a></p>
<p><a href="#" class='tooltip' title='这是我的超链接提示2.'>提示2.</a></p>
<ul>
    <li><a href="javascript:void(0);" title='<img src="image/1.webp" alt="未显示" id="tooltip">'><img src="image/1.webp" alt="未显示"></a></li>
    <li><a href="javascript:void(0);" title='<img src="image/2.webp" alt="未显示" id="tooltip">'><img src="image/2.webp" alt="未显示"></a></li>
    <li><a href="javascript:void(0);" title='<img src="image/3.webp" alt="未显示" id="tooltip">'><img src="image/3.webp" alt="未显示"></a></li>
    <li><a href="javascript:void(0);" title='<img src="image/4.webp" alt="未显示" id="tooltip">'><img src="image/4.webp" alt="未显示"></a></li>
</ul>
</body>
</html>
<!-- 火狐不支持webp格式的图片 -->
在谷歌上可以运行，火狐和ie不支持webp格式，不能运行