How to achieve the effect of displaying and hiding divs when the mouse is moved to divs in css3-CSS Tutorial-php.cn

How to achieve the effect of displaying and hiding divs when the mouse is moved to divs in css3

WBOY

Release： 2021-12-07 18:15:18

Original

7921 people have browsed it

In CSS, you can use the ":hover" selector and opacity attribute to display or hide the div element when the mouse moves to it. The syntax is "div:hover{opacity:0}" or "div:hover{opacity:1}".

How to achieve the effect of displaying and hiding divs when the mouse is moved to divs in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

css3 How to realize the effect of displaying and hiding the div when the mouse moves to the div

1. Move the mouse to the div to display the div

Yes Use the :hover selector and opacity attribute to realize the div effect when the mouse is moved to the div. The example is as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width: 380px;
                height: 250px;
                background-image: url(1118.02.png);
                opacity: 0; 
            }
            div:hover{
               width: 380px;
                height: 250px;
                background-image: url(1118.02.png);
                opacity: 1; 
            }
        </style>
    </head>
    <body>
        <div>鼠标移动到div上</div>
    </body>
</html>

Copy after login

Output result:

How to achieve the effect of displaying and hiding divs when the mouse is moved to divs in css3

2. Move the mouse to div hides div

You can still use the :hover selector and opacity attribute to move the mouse to the div to display the div effect. The example is as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width: 380px;
                height: 250px;
                background-image: url(1118.02.png);
            }
            div:hover{
               opacity: 0; 
            }
        </style>
    </head>
    <body>
        <div>鼠标移动到div上</div>
    </body>
</html>

Copy after login

Output result:

How to achieve the effect of displaying and hiding divs when the mouse is moved to divs in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to achieve the effect of displaying and hiding divs when the mouse is moved to divs in css3. For more information, please follow other related articles on the PHP Chinese website!