js总结（一）：鼠标滑过时通过js修改同级元素样式_js 鼠标经过添加样式 on-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32141707/article/details/103378232

通过“鼠标滑过”事件触发js函数，修改特定元素样式

在一些极端特殊情况，需要在鼠标滑过当前元素的情况下修改其他特定元素属性，此时css自带的hover已经不能满足需求。
题目：如下图所示，当鼠标移动到“嘤嘤怪”时将“嘤嘤嘤”修改为黑底白字，移出时恢复；当鼠标移动到“笑你妹”时将“嘿嘿嘿”修改为黑底白字，移出时恢复。
在这里插入图片描述
解题代码如下：

<html>
<body>
<script type="text/javascript">
function over(obj){
    var brother = obj.previousElementSibling; //获取当前元素的同级别前一个元素
    brother.style.color='white';
    brother.style.background='black';   
}
function out(obj){
    var brother2 = obj.previousElementSibling;
    brother2.style.color='black';
    brother2.style.background='white';
}
</script>
<div>
	<ul>
		<li id="dady">
			<a id="brother1" style="color:black; background: white;">嘤嘤嘤</a>
			<div id="submenu" onmousemove="over(this)" onmouseout="out(this)">嘤嘤怪</div>
		</li>
		<li id="dady">
			<a id="brother2" style="color:black; background: white;">嘿嘿嘿</a>
			<div id="submenu" onmousemove="over(this)" onmouseout="out(this)">笑你妹</div>
		</li>
	</ul>
</div>
</body>
</html>