The CSS attribute visibility and opacity are used to replace the jQuery events that the mouse passes by. visibilityjquery

The CSS attribute visibility and opacity are used to replace the jQuery events that the mouse passes by. visibilityjquery

I have been using jQuery's hover () function to write the mouse over the event. In the past few days, I found that other colleagues can use CSS directly. I tried it online:

Of course, there is no precondition. You need to use the position/top/left attribute together with some positioning attributes ). The Code is as follows:

<! DOCTYPE html> View Code

 

 
  
As to why positioning attributes should be used together, you can first understand the visibility attribute: visibility attribute _ w3cschool
 
  
Another attribute, opacity: opacity attribute _ w3cschool, is not clear about a part of the w3cschool. After adding CSS, the tool is tested and found. the child element p of test does not continue its opacity attribute value.

 
What I don't understand:

Added CSS code:
    .test {       margin-top: 20px;       opacity: 0.5;    }
The child element p does not continue its opacity attribute value:

 
Summary: of course, this is just a simple display of events with the mouse. To be more complex, you still need to use jQuery to write.