jquery 获取对象改变样式

努力搬砖的小码

已于 2023-04-14 13:46:14 修改

阅读量127

点赞数

分类专栏：原生JS 文章标签： jquery javascript css

于 2023-04-14 09:42:33 首次发布

本文链接：https://blog.csdn.net/weixin_63199745/article/details/130146168

版权

原生JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该代码段展示了如何使用JavaScript处理HTML元素的鼠标移入和移出事件，动态改变<divclass=bgR>元素及其内部<aclass=main>元素的样式，包括颜色、边框和内边距等属性，以实现交互效果。

摘要由CSDN通过智能技术生成

html

	<div  class="bgR">
          <img src='.png'  style="width:20px;height:20px" alt="">
		  <a  class="main">管理</a>
	</div>

JS

// 控制鼠标移入移除和click事件的冲突
var isMouse = true
// 鼠标移入改变样式
$('.bgR').mouseover(function(){
	isMouse = true
	var index = $('.bgR').index(this)
	$('.bgR').eq(index).attr("style","min-height:50px;padding-top:16px;padding-bottom:16px;padding-left: 40%;box-sizing: border-box;color: #000;color:#409EFF;border-bottom: 1px solid #D3D3D3;")
	$('.bgR a').eq(index).attr("style", "color:#409EFF")
})
// 鼠标移开改变样式
$('.bgR').mouseout(function(){
	if (isMouse) {
	var index = $('.bgR').index(this)
	$('.bgR').eq(index).attr("style","min-height:50px;padding-top:16px;padding-bottom:16px;padding-left: 40%;box-sizing: border-box;line-height: 100%;border-bottom: 1px solid #D3D3D3;")
	$('.bgR a').eq(index).attr("style", "color:black")
	}
})

重点在于：

$('.bgR a')