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

我为此搜索了很多，我找不到答案。我想div div SubTopicInfo1出现在鼠标悬停在div subTopicNav1上时。我需要它只是CSS。使div出现在另一个div上时悬停

以下是我有：

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; 
}

感谢。

来源

2013-12-20 user3123020

我不认为你可以用CSS来做到这一点，除非div是锚定的。我相信是唯一具有悬停属性的元素。可能可以做到这一点是JS。 – user1336827

我之前已经做过，并且看到了其他解决方案的问题，但它似乎并未在本网站上发挥作用，我不知道为什么。 – user3123020

只有当SubTopicInfo1是subTopicNav1的子/同级，否则你就需要使用javascript – Caelea

请尝试是这样的：

（默认隐藏的额外信息面板，然后使它可见：悬停像下面）

<style> 
.link { 
     display: block; 
} 

.link:hover p{ 
     visibility: visible; 
} 
.info{ 
     visibility: hidden; 
} 

</style> 

<body> 
     <div class="link"> 
       <a href="#"> Text Here </a> 
       <p class="info"> Info Here</p> 
     </div> 
</body>

来源

2013-12-20 14:35:26 vandijkstef

你能解释一下你的解决方案吗？ – everton

对不起，这是迟到了，但正如上面所说的代码; 默认隐藏额外的面板，并显示悬停时 – vandijkstef

你不会成为能够与刚刚CSS这样做在你的情况。

#subTopicNav1:hover + #SubTopicInfo1 {}

作品如果＃SubTopicInfi1毗邻（＃subTopicInfo1结束标记之后）的容器。

这里解释：

How to affect other elements when a div is hovered

那么你应该考虑使用jQuery/javascript中的解决方案！

来源

2013-12-20 14:36:45 Kevinvhengst

我甚至没有接触到JavaScript的网页设计，所以我会尝试重做网站，使其工作。 – user3123020

这将是很好的尝试了！你可以做很多难以理解的事情，你只用CSS就无法做到！ – Kevinvhengst

这里是工作演示http://jsfiddle.net/H9fGP/1/ 也许它不是确切的例子。但我希望它能帮助:)

主要的事情是子信息具有绝对位置

我rearanged HTML和添加一些CSS。

.container 
{ 
border-top: 5px solid #FFD640; 

margin-top: 25px; 
} 

#SubTopicNav 
{ 
    position:relative; 
} 
#SubTopicNav > div > div 
{ 
    position:absolute; 
    left:200px; 
    top:0px; 
    display:none; 
    width: 600px; 
    height: 400px; 
    margin-top: 25px; 
    float: left; 
} 
#SubTopicInfo 
{ 
    display:none; 
    background-color: #FFD640; 
} 

#SubTopicNav > div:hover >div 
{ 
display: block; 
}

来源

2013-12-20 15:04:53 spring

谢谢！我会用这个。 – user3123020

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

回答

相关问题