<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
li{
list-style: none;
float: left;
text-align: center;
}
</style>
<body>
<ul id="u">
<!--<li><img src="a.jpg"/><p>小米</p></li>-->
</ul>
</body>
</html>
<script>
var jsonObj = {
"info":[
{"src":"01.jpg","name":"小米"},
{"src":"02.jpg","name":"大米"},
{"src":"03.jpg","name":"高粱米"}
]
}
var oUl = document.getElementById("u");
var str = "";
for( var i = 0 ; i < jsonObj.info.length ; i++ ){
var item = jsonObj.info[i];
str += "<li><img src="+item.src+"/><p>"+item.name+"</p></li>"
}
oUl.innerHTML = str;
var list = oUl.children;
oUl.addEventListener( "mouseover",function( e ){
var e = e || event;
var target = e.target || e.srcElement;
if( target.tagName.toLowerCase() == "img" ){
target.style.border = "1px solid red";
target.parentNode.children[1].style.backgroundColor = "skyblue";
}
})
oUl.onmouseout = function(){
var e = e || event;
var target = e.target || e.srcElement;
if( target.tagName.toLowerCase() == "img" ){
target.style.border = "0";
target.parentNode.children[1].style.backgroundColor = "";
}
}
</script>