Создание div появляется при зависании на другом div

Я много искал для этого, я не могу найти ответ. Я хочу, чтобы div SubTopicInfo1 появлялся при зависании над div subTopicNav1. Мне нужно, чтобы это был только CSS.Создание div появляется при зависании на другом div

Вот что у меня есть:

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

Спасибо.

источник

2013-12-20 user3123020

Я не думаю, что вы можете сделать это с помощью только css, если только div не был в якоре. Я считаю, что - единственный элемент, обладающий свойством hover. Вероятно, это может быть JS. – user1336827

Я делал это раньше и видел другие вопросы с решениями, он просто не работает на этом сайте, и я не уверен, почему. – user3123020

Это может быть сделано с помощью css только в том случае, если 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

ответ

Смежные вопросы