При наведении сделать видимым
Ребята, в предыдущем тикете здорово помогли. Однако есть еще вопрос.
<style type="text/css">
.nav__dropdown_second{
display:none;
}
</style>
<div class="nav__dropdown">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Территория обслуживания сетевой организации </a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Передача электрической энергии</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link ">РАСКРЫТИЕ ИНФОРМАЦИИ</a>
<div class="nav__dropdown nav__dropdown_second">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Общая информация о передаче электрической энергии</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Нормативные документы</a>
</div>
</div>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link ">Другая информация</a>
<div class="nav__dropdown nav__dropdown_second">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Документация</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Нормативные документы</a>
</div>
</div>
</div>
</div>
надо, чтобы при наведении на див nav__dropdown-item показывался (display:block ; ) только дочерний див nav__dropdown_second Пробовал так, но что то не получается
$(function(){
$(".nav__dropdown-item").hover(function(){
$(this).children('.nav__dropdown_second').show();
},
function(){
$(this).children('.nav__dropdown_second').hide();
});});
Надо только дочерний сделать видимым!!! |
все работает вроде.
|
.nav__dropdown-item:hover .nav__dropdown_second{
display: block;
}
css это тоже под силу |
так дивов "nav__dropdown-item" много же!!!!! А мне надо сделать видимым див "nav__dropdown_second" только внутри именно наведенного дива "nav__dropdown-item". А если делать через CSS то откроются все дивы "nav__dropdown_second"
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<style type="text/css">
.nav__dropdown_second{
display:none;
}
.nav__dropdown-item:hover .nav__dropdown_second{
display: block;
}
</style>
<div class="nav__dropdown">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Территория обслуживания сетевой организации </a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Передача электрической энергии</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link ">РАСКРЫТИЕ ИНФОРМАЦИИ</a>
<div class="nav__dropdown nav__dropdown_second">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">1-ой блок</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">1-ой блок</a>
</div>
</div>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link ">Другая информация</a>
<div class="nav__dropdown nav__dropdown_second">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">2-ой блок</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">2-ой блок</a>
</div>
</div>
</div>
</div>
</body>
</html>
|
спасибо!!!!!!!
|
| Часовой пояс GMT +3, время: 07:58. |