css - 使一个 div 在悬停在另一个 div 上时出现

Question

我找了很多，找不到答案。 我希望在将鼠标悬停在 div subTopicNav1 上时显示 div SubTopicInfo1。我需要它只是 CSS。

这是我的:

Fiddle

HTML:

<div id="NavBar">

                <div id="Mainbutton">
                <center><h2 style="margin-top: 7px;"> Main </h2></center>
                </div>

                <div id="topic1button">
                <center><h2 style="margin-top: 7px;"> Skiing </h2></center>
                </div>

                <div id="topic2button">
                <center><h2 style="margin-top: 12px;"> Movies </h2></center>
                </div>


        </div>

        <div id="Main">

                <div id="IntroImage">

                </div>

                <div id="Title">
                        <h2 id="Titlemain"> TYLER POTTS</h2>
                </div>

                <div id="SubTopicNav">

                        <div id="subTopicNav1">
                                <center><h2>About Me</h2></center>
                        </div>

                        <div id="subTopicNav2">
                                <center><h2>Skiing</h2></center>
                        </div>

                        <div id="subTopicNav3">
                                <center><h2>Movies</h2></center>
                        </div>

                </div>

                <div id="SubTopicInfo">

                        <div id="SubTopicInfo1">
                        <h1> Test </h1>
                        </div>

                        <div id="SubTopicInfo2">

                        </div>

                        <div id="SubTopicInfo3">

                        </div>

                </div>

                <div id="Footer">

                </div>

        </div>

CSS:

#NavBar
{
width: 750px;
height: 40px;
background-color: white;
margin: 0 auto;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
}


#topic2button
{
width: 100px;
height: 45px;
margin-top:-50px;
margin-left: 215px;
float:left;
}

#topic2button:hover
{
background-color: #FFD640;
}

#Mainbutton
{
width: 100px;
height: 45px;
margin-top:;
margin-left: 315px;
float:left;
}

#Mainbutton:hover
{
background-color: #FFD640;
}

#topic1button
{
width: 100px;
height: 45px;
float: left;
}

#topic1button:hover
{
background-color: #FFD640;
}

#Main
{
width: 750px;
height: 1000px;
margin: 0 auto;
background-color: white;
}

#IntroImage
{
width: 750px;
height: 150px;
background-image:url("http://skiersedgeproshop.com/wp/wp-content/uploads/2013/11/snow-mountain-ski1.jpg")
}

#IntroImage:hover
{
opacity: 0.8;
}

#Title
{
width: 500px;
height: 40px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin:0 auto;
margin-top: 10px;
}

#Titlemain
{
margin-left: 170px;
margin-top: 6px; 
}

#SubTopicNav
{
width: 150px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float:left;
}

#subTopicNav1
{
margin-top: 60px;
width: 150px;
height: 50px;
}

#subTopicNav2
{
margin-top: 60px;
width: 150px;
height: 50px;
}

#subTopicNav3
{
margin-top: 60px;
width: 150px;
height: 50px;
}

#subTopicNav1:hover 
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}

#subTopicNav2:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}

#subTopicNav3:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}

#SubTopicInfo
{
width: 600px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float: left;
}

#SubTopicInfo1
{
display:none;
background-color: #FFD640;
}

#subTopicNav1:hover + #SubTopicInfo1
{
display: block;
}

谢谢。

Answer 1

在您的情况下，您无法仅使用 CSS。

#subTopicNav1:hover + #SubTopicInfo1 {}

如果 #SubTopicInfi1 位于容器旁边(#subTopicInfo1 结束标记之后)，则有效。

这里解释:

How to affect other elements when a div is hovered

所以您可能应该研究使用 Jquery/javascript 的解决方案!