我把两个文字两个图片重叠在一起，用hover属性实现鼠标悬浮显示不同的文字和图片但是并没有效果

百变五逗比

19410

发布于
2018-10-09

mmy

40766695

更新于
2018-10-09

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: #333;
    overflow: hidden;
}
.home-1{
    height: 72px;
    color: #666;
    line-height: 70px;
    text-align: center;
    border-left: 1px solid #eaeaea;
}
.font-4{
    width: 543px;
    float: left;
    color: #333;
    border: 1px solid #eaeaea;
    background-color: #fff;
    /*border-bottom-color: #fff;*/
    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:#b4a078 ;*/
    /*background-color: #ccc;*/
/*}*/
.home-2{
    position: relative;
    border: 1px solid #eaeaea;
    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: #333;
    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:#b4a078 ;
    background-color: #ccc;
}
.none-6:hover .none-1{
    display: none;
}
.none-6:hover .none-2{
    display: none;
}

代码有些乱还请多多包涵

css html

阅读 5.5k

3 个回答

✓ 已被采纳

先上结论：如果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>

但是hover到外面就会显示home1的内容，而不是hover到header1上再显示home1的内容，体验感并不好