How To Change the Background Color on Hover With jQuery

This article provides a demonstration of where jQuery can change the background color on hover. Included in this example is usable code.

This article was first seen on and republished from csstutorial.io

jQuery Hover Change Background Color
jQuery Hover Change Background Color

HTML

First, we need to create the menu that we will be using to demonstrate the jQuery effect. We will create two HTML DIV elements that each have their own class name. These elements will wrap around an unordered list element that contains four list items.

<div class="menu-container">
  <ul class="menu">
     <li>Home</li>
     <li>About</li>
     <li>Contact</li>
     <li>Photo</li>
  </ul>
</div>

CSS

The CSS styles provided vertically and horizontally centers the menu in the middle of the webpage. This is achieved by using the CSS display flexbox, CSS justify-content center, and the CSS flexbox-align center properties. 

html, body {
  background: #6ef7f7;
  background: -webkit-linear-gradient(top left, #6ef7f7, #c746f2);
  background: -moz-linear-gradient(top left, #6ef7f7, #c746f2);
  background: linear-gradient(to bottom right, #6ef7f7, #c746f2);
  height: 100%;
  font-family: Roboto, arial, sans-serif;
  color: #fff;
  height: 100%;
  overflow: hidden;
}

.menu {
  list-style: none;
}

.menu li {
  font-size: 20px;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
  border-radius: 4px;
}

.menu {
  width: 450px;
  margin: 0 auto;
  background: rgba(16 18 27 / 40%);
  border-radius: 8px;
  backdrop-filter: blur(20px);
}

.menu-container {
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

jQuery

The jQuery code below is wrapped in a document-ready function. This function waits until the webpage has finished loading before allowing the code inside to execute.

The code below updates the CSS of a list element with a parent of “.menu”. This happens because we use the .hover method that binds to the jQuery selector. The color that is set whenever a user hovers is… “#2f2f2f. Whenever the cursor leaves the element, the secondary function sets the CSS background to transparent. 

$(document).ready(function(){
    $(".menu li").hover(function(){
        $(this).css("background", "#2f2f2f");
    },
    function(){
        $(this).css("background","transparent");
    });
});

Edit a live demonstration on codepen.io

Google CDN:

This script installs jQuery from Google’s CDN. This CDN provides a hosted minified version of jQuery that loads the script whenever your page loads. To use this in your project, just include the script and its source link in your webpage’s header.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

Recommended Articles