I overlapped two words and two pictures together and used the hover property to hover the mouse to display different text and pictures, but it had no effect.

html: 

<div class="home">
    <div class="home-1">
        <a href="">
            <div class="font-4 none-5">
                 <div>HOME@</div>
            </div>
            <div class="font-4 none-6">
                 <div>HOME@</div>
            </div>
        </a>
    </div>
    <div class="home-2">
        <div class="home-3">
            <div class="text">
                <div class="none-1">
                    
                </div>
                <div class="none-2">
                    HOME
                </div>
            </div>
            <a href="">
                <div><img src="weiNiYanXuan-image/kongjian1.jpg" alt=""></div>
                <div><img src="weiNiYanXuan-image/kongjian2.jpg" alt=""></div>
            </a>
        </div>
    </div>
</div>

css: 

.home{
    color: -sharp333;
    overflow: hidden;
}
.home-1{
    height: 72px;
    color: -sharp666;
    line-height: 70px;
    text-align: center;
    border-left: 1px solid -sharpeaeaea;
}
.font-4{
    width: 543px;
    float: left;
    color: -sharp333;
    border: 1px solid -sharpeaeaea;
    background-color: -sharpfff;
    /*border-bottom-color: -sharpfff;*/
    border-left: none;
    font-size: 18px;
    line-height: 70px;
    text-align: center;
    font-weight: bold;
}
.font-4 div{
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*.home-1 a .font-4 div:hover{*/
    /*color:-sharpb4a078 ;*/
    /*background-color: -sharpccc;*/
/*}*/
.home-2{
    position: relative;
    border: 1px solid -sharpeaeaea;
    border-top: none;
    padding: 40px 75px 0px 75px;
    height: 601px;
}
.text{
    margin-bottom: 30px;
    height: 40px;
    text-align: left;
}
.text div{
    margin-left: 45px;
    height: 40px;
    font-size: 14px;
    color: -sharp333;
    line-height: 20px;
    text-align: left;
}
.home-3 a{
    display: block;
    width: 940px;
    height: 450px;
    position: relative;
}
.none-1{
    display: block;
}
.none-2{
    position: absolute;
    top: 0px;
    margin-top: 40px;
    margin-right: 75px;
    display: none;
}
.none-4 img{
    position: absolute;
    bottom: 450px;
    display: none;
}
.none-6:hover{
    color:-sharpb4a078 ;
    background-color: -sharpccc;
}
.none-6:hover .none-1{
    display: none;
}
.none-6:hover .none-2{
    display: none;
}

clipboard.png

Please forgive me if the code is a little messy.

Html css
Aug.12,2021

.none-6:hover .none-1, .none-6:hover .none-2 can't match the elements

.none-6:hover .none-1, .none-6:hover .none-2 can't get the elements, which needs to be implemented with js

.

come to a conclusion: it is possible to change the structure of dom

. 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .home {
                position: relative;
                padding-top: 60px;
            }
            .header1, .header2 {
                position: absolute;
                width: 543px;
                height: 60px;
                top: 0;
                text-align: center;
                
            }
            .header2 {
                margin-left: 543px;
            }
            .header2 ~ .home2 {
                display: none;
            }
            .header2:hover ~ .home1 {
                display: none;
            }
            .header2:hover ~ .home2 {
                display: block;
                z-index: 1;
            }
            .header2 ~ .home2:hover {
                display: block;;
            }
            .header2 ~ .home2:hover ~ .home1 {
                display: none;
            }
            .home1, .home2 {
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="home">            
            <div class="header1">
                <a >HOME@</a>
            </div>
            <div class="header2">
                <a >HOME@</a>
            </div>
            <div class="home2">
                <div class="content">
                    <div class="none-2">
                        HOME
                    </div>
                    <div>
                        <a >
                            <img src="http://placeimg.com/640/520/any" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="home1">
                <div class="content">
                    <div class="none-1">
                        
                    </div>
                    <div>
                        <a >
                            <img src="http://placeimg.com/640/480/any" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

but hover will display the content of home1 on the outside, instead of hover going to header1 and then displaying the content of home1. The experience is not good

Previous: Vue project iview reports an error after being packaged with view components

Next: Parsing and processing combined xml data, the solution must be appreciated

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu