39,084
社区成员
发帖
与我相关
我的任务
分享请问怎么控制同级元素,该用什么方法最简单?
我都用的div块 下面的也是div用的绝对定位放在那里的 都是同级DIV 怎么才能鼠标经过一个元素 就显示一个颜色背景的方框呢? 并且鼠标离开了之后 还是鼠标经过后的样子? 谢谢~
...全文
请发表友善的回复…
发表回复
black方块cxy 2018-05-11
- 打赏
- 举报
你试下统一给他们这些div加className可以用js，获取元素再操作
yaotomo 2018-04-25
- 打赏
- 举报
在鼠标进入到元素事件中使用
addClass()
removeClass()
或者css()来设置元素的样式
天际的海浪 2018-04-24
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
#menu div {
width: 50px;
float: left;
background-color: #ccc;
}
#content {
clear: left;
}
#content div {
display: none;
}
#menu div.hover {
background-color: #ccf;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<div class="hover">栏目1</div>
<div>栏目2</div>
<div>栏目3</div>
<div>栏目4</div>
</div>
<div id="content">
<div style="display: block;">内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
<script type="text/javascript">
$(function(){
$("#menu div").mouseenter(function(event){
$(this).addClass("hover").siblings().removeClass("hover");
$("#content div").eq($(this).index()).show().siblings().hide();
});
});
</script>
</body>
</html>