Home>

Today, doing a webpage for a sister and sister encountered a request like this:

The mouse does not move into the form,The form transparency is unchanged.

Mouse over the table,Cells hovered to remain transparent,Cells without hover to transparency change.

First posted the good results I have achieved,In the beginning, the form transparency was unchanged.

When I move the mouse to the third cell in the second row,Other cells have reduced transparency.

Solution

At the beginning, I used the css implementation method,Is the following

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

However, the transparency of the table was 0.5 when I first entered it, which looked very bad.

Later I used the hover method of jquery, but it always selected all the cells in it,The process is very tortuous,I wo n’t introduce them one by one,I will 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 funtion moves to the table,chief

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

When the mouse moves in,All cells have a transparency of 0.5, then

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

Here the hover selector of the css indicates that a single cell is selected.

The second funtion indicates when the mouse leaves the table

  • Previous C # operation JSON method summary
  • Next Java uses Rhino/Nashorn instead of third-party JSON conversion libraries