The hover method in jQuery implements highlighting of selected elements

This article mainly brings you an article about the hover method in jQuery and the hover selector in css to realize the method of highlighting selected elements. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

Today when I was helping a senior sister to create a web page, I encountered a request like this:

The mouse does not move into the form and the transparency of the form remains unchanged.

When the mouse is moved into the table, the transparency of the hovered cells remains unchanged, and the transparency of the cells not hovered changes.

First post the effect I have achieved. At the beginning, the transparency of the table remains unchanged.

When I move the mouse to the third cell in the second row, the other cells reduce their transparency.

Solution

At the beginning, I used the CSS implementation method, which is as follows

#table td{
 opacity:0.5;
}
#table td:hover{
 opacity:1;
}

However, when you first enter, the table transparency is 0.5, which looks very bad.

Later I used jQuery's hover method, but it always selected all the cells inside. The process was very tortuous, so I won't introduce them one by one. I will just talk about how I achieved it.

$('#content td').hover(
  function(){
   $('#content td').css('opacity','0.5');
   $('#content td:hover').css('opacity','1');
   },
  function(){
   $('#content td').css('opacity','1');
  });

content is the id name of my table. You can see that we added two functions to the cell hover method

When the first function is moved to the table, the chief

$('#content td').css('opacity','1');

means that when the mouse moves in, the transparency of all cells is 0.5, and then

$('#content td:hover').css('opacity','1');

The hover selector of css here means selecting a single unit grid.

The second funtion indicates when the mouse leaves the form

Related recommendations:

Summary of usage examples of hover

Detailed explanation of the use of hover selector in CSS

Detailed explanation of the conflict between hover and click events in jQuery (picture)

The above is the detailed content of The hover method in jQuery implements highlighting of selected elements. For more information, please follow other related articles on the PHP Chinese website!