У меня есть два divs, первый из которых содержит меню li
, а второй - подменю. Когда я парить меню li
он должен показать следующий DIV с CSSПокажите еще один div, пока он наводил
li:hover{
//Display Submenu
}
У меня есть два divs, первый из которых содержит меню li
, а второй - подменю. Когда я парить меню li
он должен показать следующий DIV с CSSПокажите еще один div, пока он наводил
li:hover{
//Display Submenu
}
https://jsfiddle.net/yv6pyk7a/
.secondDiv:hover {
display:block;
}
.secondDiv > li:hover {
background: #aaa;
cursor: pointer;
}
Просто проверьте этот. Надеюсь, он решит проблему.
Спасибо вам Praveenkumar, JustTRY, imGaurav, Санджив Шетти, Steevan, –
Gud работа PraveenKumar :) – Steevan
Спасибо за обновление. Но я не могу перейти ко второму диву. Он правильно показывает –
Вы хотите переместить свой второй div, можете ли вы объяснить. – Steevan
Да. Мне нужно навести второй div, пока я наводил курсор на первый div. Это похоже на меню подменю по вертикали –
https://jsfiddle.net/54f3owv4/7/
.FirstDiv:hover + .secondDiv {
display:block;
}
.secondDiv:hover {
display:block;
}
Отобразите ее на ли: наведите курсор на div: hover. –
Если на li тогда вам нужны js, так как css не может попасть на верхний уровень, вот он: http://jsfiddle.net/54f3owv4/5/ – justtry
Да. Вам нужно jquery как css can not вернуться к родительским тэгам. –
.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>
Спасибо. он показывает второй div. Но мне нужно выбрать второе подменю div. второй div будет иметь подменю. Мне нужно это выбрать. Теперь я не могу перейти ко второму div. –
@JeysinghAnbu, я редактировал мой ответ, пожалуйста, проверьте – imGaurav
Эта скрипка https://jsfiddle.net/yv6pyk7a/1/ решена моя проблема –
Мне нужно показать 'secondDiv' в 'FirstDiv' li: hover –
Это легко, когда div является дочерним элементом li: 'li div {display: none; } li: hover div {display: block; } ', но если это не так, вам, вероятно, понадобится JavaScript. – pawel
Вы хотите, чтобы эффект на li: hover или div: hover @JeysinghAnbu –