怎么用js获取一组img，当鼠标移过li时img变成另一张图片
日期：2014-05-16 浏览次数：20577 次
如何用js获取一组img，当鼠标移过li时img变成另一张图片？
需求是这样的，img里没有放图片就是设置的样式，宽度和高度都是10px，设了一个背景颜色（#03C）；当鼠标移到#set_menu li里时，img背景颜色变成#900，宽度和高度是10px，我写的js不对，请高手帮着看看，谢谢！可以不在html里加onmouseover和onmouseout事件吗？直接在js里添加onmouseover和onmouseout事件，html里不写，如何获取一组img？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.hd{ width:470px; height:55px; z-index:1; position:relative;}
.hd .menu{ width:407px; height:40px; background-color:#000; float:right; margin:8px 0;}
.hd .menu .menu-ul{ list-style:none; margin:0;}
.hd .menu .menu-ul .menu-li{color: #FFFFFF; float: left;font-size: 18px; margin-left: 50px;margin-right: 20px;width: 120px; height:40px; position:relative; cursor:pointer; text-align:center;}
.hd .menu .menu-ul .menu-li:hover{color:#0f0; background:#333;}
.hd .menu .menu-ul .menu-li .menu-span{ cursor:pointer; display:inline-block; margin:10px auto;}
.current{color:#0f0;}
.hd .menu2 {position: absolute; z-index:999; background:#fff; top:40px; width:120px; margin:0 auto; left:0;}
.hd .menu2 ul {list-style: none outside none;padding: 0;position:relative;top:3px;background-color:#fff;}
.hd .menu2 li { border-bottom: 1px dashed #777777; color: #333333; font-size: 15px; padding: 0 10px 5px 10px;text-align: left; position:relative; cursor:pointer; height:25px;}
.hd .menu2 li:hover{ background-color:gray;}
.hd .menu2 li:hover a{ color:#fff;}
.hd .menu2 ul li a { color: #333333; text-decoration: none;}
.hd .menu2 ul li a:hover{ color: #fff; text-decoration: none;}
.hd .menu2 ul li img { margin-right: 15px;position:relative;top:5px; max-height:25px; max-width:20px;}
</style>
</head>
<body>
<div class="hd">
<div class="menu">
<ul class="menu-ul">
<li class="menu-li" onmouseover="showMenu('set_menu','set-hd')" onMouseOut="hideMenu('set_menu','set-hd')" >
<span id="set-hd" class="menu-span" onClick="location.href='/user/snssetting'">关于我们</span>
<div class="menu2" id="set_menu">
<ul>
<li onClick="location.href='/user/avatarupload'" onMouseOver="document.getElementsByTagName("img")[0].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName("img")[0].style.css='width':'10px','height':'10px','background':'#03C';"><img style="width:10px; height:10px; background-color:#03C; display:inline-block; margin-top:-10px;" /><a href="#">市场推广</a></li>
<li onClick="location.href='/user/edit'" onMouseOver="document.getElementsByTagName("img")[1].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName("img")[1].style.css='width':'10px','height':'10px','background':'#03C';"><img style="width:10px; height:10px; background-color:#03C; display:inline-block; margin-top:-10px;" /><a href="/user/edit">招商引资</a></li>
<li onClick="location.href='/user/snssetting'" onMouseOver="document.getElementsByTagName("img")[2].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName
需求是这样的，img里没有放图片就是设置的样式，宽度和高度都是10px，设了一个背景颜色（#03C）；当鼠标移到#set_menu li里时，img背景颜色变成#900，宽度和高度是10px，我写的js不对，请高手帮着看看，谢谢！可以不在html里加onmouseover和onmouseout事件吗？直接在js里添加onmouseover和onmouseout事件，html里不写，如何获取一组img？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.hd{ width:470px; height:55px; z-index:1; position:relative;}
.hd .menu{ width:407px; height:40px; background-color:#000; float:right; margin:8px 0;}
.hd .menu .menu-ul{ list-style:none; margin:0;}
.hd .menu .menu-ul .menu-li{color: #FFFFFF; float: left;font-size: 18px; margin-left: 50px;margin-right: 20px;width: 120px; height:40px; position:relative; cursor:pointer; text-align:center;}
.hd .menu .menu-ul .menu-li:hover{color:#0f0; background:#333;}
.hd .menu .menu-ul .menu-li .menu-span{ cursor:pointer; display:inline-block; margin:10px auto;}
.current{color:#0f0;}
.hd .menu2 {position: absolute; z-index:999; background:#fff; top:40px; width:120px; margin:0 auto; left:0;}
.hd .menu2 ul {list-style: none outside none;padding: 0;position:relative;top:3px;background-color:#fff;}
.hd .menu2 li { border-bottom: 1px dashed #777777; color: #333333; font-size: 15px; padding: 0 10px 5px 10px;text-align: left; position:relative; cursor:pointer; height:25px;}
.hd .menu2 li:hover{ background-color:gray;}
.hd .menu2 li:hover a{ color:#fff;}
.hd .menu2 ul li a { color: #333333; text-decoration: none;}
.hd .menu2 ul li a:hover{ color: #fff; text-decoration: none;}
.hd .menu2 ul li img { margin-right: 15px;position:relative;top:5px; max-height:25px; max-width:20px;}
</style>
</head>
<body>
<div class="hd">
<div class="menu">
<ul class="menu-ul">
<li class="menu-li" onmouseover="showMenu('set_menu','set-hd')" onMouseOut="hideMenu('set_menu','set-hd')" >
<span id="set-hd" class="menu-span" onClick="location.href='/user/snssetting'">关于我们</span>
<div class="menu2" id="set_menu">
<ul>
<li onClick="location.href='/user/avatarupload'" onMouseOver="document.getElementsByTagName("img")[0].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName("img")[0].style.css='width':'10px','height':'10px','background':'#03C';"><img style="width:10px; height:10px; background-color:#03C; display:inline-block; margin-top:-10px;" /><a href="#">市场推广</a></li>
<li onClick="location.href='/user/edit'" onMouseOver="document.getElementsByTagName("img")[1].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName("img")[1].style.css='width':'10px','height':'10px','background':'#03C';"><img style="width:10px; height:10px; background-color:#03C; display:inline-block; margin-top:-10px;" /><a href="/user/edit">招商引资</a></li>
<li onClick="location.href='/user/snssetting'" onMouseOver="document.getElementsByTagName("img")[2].style.css='width':'10px','height':'10px','background':'#900';" onMouseOut="document.getElementsByTagName
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
