鼠标滑过图片对应的文字高亮
Posted tis100204
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标滑过图片对应的文字高亮相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于鼠标滑过图片对应的文字高亮的主要内容，如果未能解决你的问题，请参考以下文章
请问鼠标滑过背景图片，图片围绕圆心旋转的效果怎么实现？css3也可以..