2015-08-05 29 views
1

У меня есть два divs, первый из которых содержит меню li, а второй - подменю. Когда я парить меню li он должен показать следующий DIV с CSSПокажите еще один div, пока он наводил

li:hover{ 
    //Display Submenu 
} 

Fiddle here

+1

Мне нужно показать 'secondDiv' в 'FirstDiv' li: hover –

+0

Это легко, когда div является дочерним элементом li: 'li div {display: none; } li: hover div {display: block; } ', но если это не так, вам, вероятно, понадобится JavaScript. – pawel

+0

Вы хотите, чтобы эффект на li: hover или div: hover @JeysinghAnbu –

ответ

4

https://jsfiddle.net/yv6pyk7a/

.secondDiv:hover { 
    display:block; 
} 
.secondDiv > li:hover { 
    background: #aaa; 
    cursor: pointer; 
} 

Просто проверьте этот. Надеюсь, он решит проблему.

+0

Спасибо вам Praveenkumar, JustTRY, imGaurav, Санджив Шетти, Steevan, –

+0

Gud работа PraveenKumar :) – Steevan

1

Проверьте с ссылкой ниже как вы хотите.

Fiddle

.FirstDiv:hover + .secondDiv { 
    display:block; 
} 
+0

Спасибо за обновление. Но я не могу перейти ко второму диву. Он правильно показывает –

+0

Вы хотите переместить свой второй div, можете ли вы объяснить. – Steevan

+0

Да. Мне нужно навести второй div, пока я наводил курсор на первый div. Это похоже на меню подменю по вертикали –

0

https://jsfiddle.net/54f3owv4/7/

.FirstDiv:hover + .secondDiv { 
    display:block; 
} 
.secondDiv:hover { 
    display:block; 
} 
+0

Отобразите ее на ли: наведите курсор на div: hover. –

+0

Если на li тогда вам нужны js, так как css не может попасть на верхний уровень, вот он: http://jsfiddle.net/54f3owv4/5/ – justtry

+0

Да. Вам нужно jquery как css can not вернуться к родительским тэгам. –

0

.FirstDiv{ 
 
    float:left; 
 
height: 200px; 
 
overflow-y:scroll; 
 
border: 1px solid; 
 
width:500px; 
 
    position:relative; 
 
    
 
} 
 
.secondDiv{ 
 
    float:left; 
 
    border: 1px solid; 
 
    height: 200px; 
 
    width:200px; 
 
    background: #FF2200; 
 
    display:none; 
 
    position:absolute; 
 
    left:100px; 
 
    top:10px; 
 
} 
 
li{ 
 
    height:30px; 
 
    color:#FFF; 
 
    background-color: #000; 
 
} 
 

 
.menu:hover .secondDiv, 
 
.menu:hover ~ .secondDiv { 
 

 
    display:block; 
 
}
<div class="navigation"> 
 
<div class="FirstDiv"> 
 
    <ul> 
 
    <li class="menu"> Menu 1 
 
     
 
     <div class="secondDiv"> 
 
    Second Div 1 <br/> 
 
    Sub menus 
 
</div> 
 
     
 
     </li> 
 
    <li class="menu"> Menu 2 
 
     <div class="secondDiv"> 
 
    Second Div 2<br/> 
 
    Sub menus 
 
</div> 
 
     
 
     </li> 
 
    <li class="menu"> Menu 3 
 
     <div class="secondDiv"> 
 
    Second Div 3 <br/> 
 
    Sub menus 
 
</div> 
 
     </li> 
 
    <li class="menu"> Menu 4 
 
     <div class="secondDiv"> 
 
    Second Div 4<br/> 
 
    Sub menus 
 
</div> 
 
     
 
     </li> 
 
    </ul> 
 
</div> 
 
<d 
 
</div>

+0

Спасибо. он показывает второй div. Но мне нужно выбрать второе подменю div. второй div будет иметь подменю. Мне нужно это выбрать. Теперь я не могу перейти ко второму div. –

+0

@JeysinghAnbu, я редактировал мой ответ, пожалуйста, проверьте – imGaurav

+0

Эта скрипка https://jsfiddle.net/yv6pyk7a/1/ решена моя проблема –

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