鼠标移到图片上显示描述信息.png
JavaScript原生代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img{
width:400px;
height:300px;
}
#showCountry{
position:absolute;
width:300px;
height:200px;
background-color:lightgreen;
color:black;
display:none;
border:1px solid gray;
}
</style>
<script>
var list = {
"zg": ["中国", "北京", "牡丹", "世界第二大经济体"],
"mg": ["美国", "纽约", "玫瑰", "白人和黑人壹起劳动"],
"rb": ["日本", "东京", "樱花", "忍者和A片"],
"hg": ["韩国", "首尔", "无穷", "女人喜欢整容的国度"]
};
window.onload = function () {
var imgs = window.document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function () {
//获取国家信息
var msg = list[this.id];
var msgStr = "国家:" + msg[0] + "<br>首都:" + msg[1] + "<br>国花:" + msg[2] + "<br>描述:" + msg[3];
var showCountry = window.document.getElementById("showCountry");
showCountry.style.display = "block";
showCountry.style.left = event.clientX + "px";
showCountry.style.top = event.clientY + "px";
showCountry.innerHTML = msgStr;
}
imgs[i].onmouseout = function () {
var showCountry = window.document.getElementById("showCountry");
showCountry.style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="showCountry"></div>
![](https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C4%2C1500%2C992%3Bc0%3Dbaike180%2C5%2C5%2C180%2C60/sign=794b91c402087bf469a30da9cfe37b18/eac4b74543a98226ab2285a88a82b9014b90eb5a.jpg)
![](https://img.haomeiwen.com/i1687947/030c240f98b4376e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=b7383f64a744ad343ab28fd5b1cb6791/a5c27d1ed21b0ef43dce05d7dbc451da81cb3e10.jpg)
![](https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=ed806ef47ad98d1062d904634056d36b/8d5494eef01f3a29eea82dc69f25bc315c607c52.jpg)
</body>
</html>
jQuery实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="script/jquery-3.2.1.js"></script>
<script>
var list = {
"zg": ["中国", "北京", "牡丹", "世界第二大经济体"],
"mg": ["美国", "纽约", "玫瑰", "白人和黑人壹起劳动"],
"rb": ["日本", "东京", "樱花", "忍者和A片"],
"hg": ["韩国", "首尔", "无穷", "女人喜欢整容的国度"]
};
$(function () {
$("img").hover(function () {
var msg = list[this.id];
var countryInfo = "国家:" + msg[0] + "<br>首都:" + msg[1] + "<br>国花:" + msg[2] + "<br>描述:" + msg[3];
$("#showCountry").css({ "left": event.clientX, "top": event.clientY, "display": "block" }).html(countryInfo)
}, function () {
$("#showCountry").css("display", "none");
});
})
</script>
<style>
img {
width: 400px;
height: 300px;
}
#showCountry {
position: absolute;
width: 300px;
height: 200px;
background-color: lightgreen;
color: black;
display: none;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="showCountry"></div>
![](https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C4%2C1500%2C992%3Bc0%3Dbaike180%2C5%2C5%2C180%2C60/sign=794b91c402087bf469a30da9cfe37b18/eac4b74543a98226ab2285a88a82b9014b90eb5a.jpg)
![](https://img.haomeiwen.com/i1687947/030c240f98b4376e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=b7383f64a744ad343ab28fd5b1cb6791/a5c27d1ed21b0ef43dce05d7dbc451da81cb3e10.jpg)
![](https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=ed806ef47ad98d1062d904634056d36b/8d5494eef01f3a29eea82dc69f25bc315c607c52.jpg)
</body>
</html>
网友评论