我想在这段代码中为元“ a”创建一个HOVER事件,以更改其背景颜色,但是它似乎不起作用,我真的不知道我在想什么,这里是:
document.addEventListener("DOMContentLoaded", function() {
$("#admin_symbol").hover(function(){
$("#header_div2").css("background-color","black");
},
function(){
$("#header_div2").css("background-color","#222222");
}
);
$("#sub_menu_admin").hide();
$("#admin_symbol").click(function(){
$("#sub_menu_admin").slideToggle();
})
<!-- i create it here -->
$(".class_admin").hover(function(){
$(this).css("background-color","#cccccc");
}
,
function(){
$(this).css("background-color","white");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">
<div id="header_div1">
Quảng trị hệ thống
</div>
<div id="header_div2">
<ul>
<li id="admin_symbol"><span id="admin_welcome"> Xin chào: Admin</span></li>
<ul id="sub_menu_admin">
<li id ="admin_prolife"><a class="class_admin" id ="admin_a1" href="#"><img id="admin_prolife_symbol" src="https://cdn3.iconfinder.com/data/icons/user-with-laptop/100/user-laptop-512.png">  Prolife</a></li>
<li id="admin_changepw"><a class="class_admin" id ="admin_a2" href="#"><img id="admin_changepw_symbol" src="http://simpleicon.com/wp-content/uploads/setting2.png">   Đổi mật khẩu</a></li>
<li id="admin_logout"><a class="class_admin" id ="admin_a3" href="#"><img id="admin_logout_symbol" src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/012_power-512.png">  Log out</a></li>
</ul>
</ul>
</div>
</div>
以防万一:
+我的完整项目:https://jsfiddle.net/HiepNguyen/do7nsyr5/93/
我确实尝试使用CSS创建一个悬停事件,但是没有运气。 我感谢所有帮助。
[更新] :我发现当我在jsfiddle上使用我的代码时,它运行良好,但是当我在本地运行时,子菜单项不会像我一样更改其背景颜色。想要,仍然不知道为什么。