1. 要求：对一个a标签元素，当鼠标操作，移入时，显示a标签title属性的信息，鼠标移出时，隐藏a标签属性的title属性信息
a 标签本身的title 属性具有自我显示的特性，但是这个特性比较慢，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<p><a href="javascript:;" class="tool" title="这是超链接1">链接122222222222</a></p>
<p><a href="javascript:;" class="tool" title="这是超链接2">链接2313574754778</a></p>
<p><a href="javascript:;" tilte="自带提示1">提示1</a></p>
<p><a href="javascript:;" tilte="自带提示2">提示2</a></p>
</div>
</body>
</html>
运行效果：
改写显示title属性如下：
加入js代码：
<script>
$(function() {
var atool = $(".tool");
atool.mouseover(function(e) {
var show_div = "<div id='show_d' style='display:none;'>" + $(this).attr("title") + "</div>";
$("body").append(show_div);
$("#show_d").css({
"top": (e.pageY + 30) + 'px',
"left": (e.pageX + 20) + "px",
"position": "absolute"
}).show();
}).mouseout(function() {
$("#show_d").remove();
});
});
</script>
运行效果：发现显示重复了，新增的div和本身a标签的属性都显示了，需要去掉一个
更改后：在显示的时候，把title属性去掉，这样就只会显示一个了，相当于改写了a标签的title显示属性
<script>
$(function() {
var atool = $(".tool");
atool.mouseover(function(e) {
$(this).attr("mytitle", $(this).attr("title"));
var show_div = "<div id='show_d' style='display:none;'>" + $(this).attr("mytitle") + "</div>";
$("body").append(show_div);
$(this).removeAttr("title");
$("#show_d").css({
"top": (e.pageY + 30) + 'px',
"left": (e.pageX + 20) + "px",
"position": "absolute"
}).show();
}).mouseout(function() {
$(this).attr('title', $(this).attr("mytitle"));
$("#show_d").remove();
});
});
</script>
运行结果：
2. 做一个鼠标跟随显示大图的效果，这种效果在商城中经常会用到
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
display: inline-block;
list-style-type: none;
float: left;
width: 100px;
height: 60px;
overflow: hidden;
margin: 6px;
}
li a {
display: inline-block;
width: 100%;
height: 100%;
}
li a img {
display: inline-block;
width: 100%;
height: 100%;
}
p {
background: #c01;
text-align: center;
}
div {
display: none;
}
div img {
float: left;
}
</style>
</head>
<body>
<ul>
<li><a href="./img/1.jpg" class="tool" title="锦衣卫"><img src="./img/1.jpg" alt="锦衣卫"></a></li>
<li><a href="./img/2.jpg" class="tool" title="君子堂"><img src="./img/2.jpg" alt="君子堂"></a></li>
<li><a href="./img/3.jpg" class="tool" title="少林"><img src="./img/3.jpg" alt="少林"></a></li>
<li><a href="./img/4.jpg" class="tool" title="唐门"><img src="./img/4.jpg" alt="唐门"></a></li>
<li><a href="./img/5.jpg" class="tool" title="武当"><img src="./img/5.jpg" alt="武当"></a></li>
</ul>
</body>
</html>
JS代码如下（备注：这里的this 是JS的写法，上面一个是jquery的写法，JS的写法可以使用 element.attribute 的方式操作属性，而jquery不可以，jquery要使用$(this).attr(),或者$(this).prop() 来操作属性）：
<script>
$(function() {
var atool = $(".tool");
var x = 20;
var y = 20;
atool.mouseover(function(e) {
// 设置自定义属性mytitle,将属性title的值赋值给此自定义属性
this.mytitle = this.title;
// 清空属性title的值，这样a标签的title属性就不会显示了
this.title = "";
// 设置要添加图片的alt属性
var imgTitle = this.mytitle ? this.mytitle : "";
//创建要添加的图片元素div，其中包含img元素
var to_body = "<div id='to_body'><img src='" + this.href + "' alt='产品预览图:" + imgTitle + "'>" + "<p>产品预览：" + imgTitle + "</p>" + "</div>";
// 将创建的元素添加到body中
$("body").append(to_body);
// 设置图片的top和left值
$("#to_body").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px",
'position': 'absolute'
}).show();
// 鼠标移出后，删除添加的div元素，即可使用img消失
}).mouseout(function() {
this.title = this.mytitle;
$("#to_body").remove();
// 鼠标在图片上移动时，添加的节点位置跟随鼠标变化而变化
}).mousemove(function(e) {
$("#to_body").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
})
</script>
运行结果：