使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上時懸停

回答

相關問題