search

Home >Web Front-end >JS Tutorial >js method to implement background image sensing mouse changes_javascript skills

js method to implement background image sensing mouse changes_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:12:23996browse

The example in this article describes how js implements background image sensing mouse changes. Share it with everyone for your reference. The specific analysis is as follows:

The background image changes after a mouse click. Clicking in front of another menu item will automatically restore the background. In fact, this cannot be done by simply using CSS. We also need to use JS to determine the mouse status. The code is as follows: 

<style type="text/css"> 
.dh a{
background:#FFFFCC;
width:50px;
height:30px;
display:block; 
text-align:center;
color:#000000;
} 
.dh a:hover{
background:#FF9900;
} 
</style> 
</head> 
<body> 
<div> 
 <div class="dh"><a href="#">导航1</a></div> 
 <div class="dh"><a href="#">导航2</a></div> 
 <div class="dh"><a href="#">导航3</a></div> 
 <div class="dh"><a href="#">导航4</a></div> 
 <div class="dh"><a href="#">导航5</a></div> 
</div> 
<script type="text/javascript"> 
$(function(){ 
  $(".dh a").click(function(){ 
    $(".dh a").removeAttr("style"); 
    $(this).attr("style","background:#CCFF99;"); 
  }) 
}) 
</script>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to methods of converting between jQuery objects and DOM objects_jqueryNext article：Introduction to methods of converting between jQuery objects and DOM objects_jquery

Related articles

See more