js总结(一):鼠标滑过时通过js修改同级元素样式

通过“鼠标滑过”事件触发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>
  1. 函数调用:在元素的特定事件发生时调用,如鼠标滑过(onmousemove)、鼠标点击(onclick)等等;
  2. 参数传递:调用函数时传递参数"this"可将当前元素对象传送到函数中;
  3. 获取同级别前一个元素对象:previousElementSibling(W3C标准),建议采用。

你可能感兴趣的:(前端)