Форум

KonstantinK · #1 (**permalink**) 11.04.2011, 19:15

Задача вот какая , создаю выпадающее меню.
Структура такая : ряд дивов с одинаковым классом и внутри дива еще див со списком ссылок изначально display:none

<div class="m_c"><a href="#">Деньги</a>
  <div class="m_m_l_money">тут содерждание со ссылками</div>
</div>

Ну и так соответственно несколько штук, конечно я там все с позиционировал с помощью position:relative и position:absolute
Как мне с помощью jquery сделать чтоб внутренний див открывался при наведении мыши на ссылку наружного дива. Если я пишу вот так

$(document).ready(function(){ 
    $('.m_c').mouseover(function(){
        $('div').show()
    })
})

то выпадают все дивы , а как мне сделать чтоб выпадал только див того элемента над которым мышь? Я еще слаб в jquery , подскажите.

walik · #2 (**permalink**) 11.04.2011, 19:19

<html>
<head>
<style>
.submenu {
	display: none;
}

.btn:hover .submenu {
	display: block;
}
</style>
</head>
<body>
<div class="btn"><a href="#">Меню 1</a>
	<div class="submenu">blablbla</div>
</div>
<div class="btn"><a href="#">Меню 2</a>
	<div class="submenu">blablbla</div>
</div>
</body>
</html>

Ну а если все же на JS то так:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    $('.m_c').mouseover(function(){
        $('div', this).show();
    });
	$('.m_c').mouseout(function(){
        $('div', this).hide();
    });
})
</script>
<style>
.m_c div {
	display: none;
}
</style>
</head>
<body>
<div class="m_c"><a href="#">Меню 1</a>
  <div class="m_m_l_money">тут содерждание со ссылками</div>
</div>
<div class="m_c"><a href="#">Меню 2</a>
  <div class="m_m_l_money">тут содерждание со ссылками</div>
</div>
</body>
</html>

KonstantinK · #3 (**permalink**) 11.04.2011, 19:33

walik,
Спасибо, я сначала пытался сделать с помощью css но писал :hover div а оно не срабатывала, а про класс я как то не подумал.

Форум

Справочник

Discord чат

Курсы javascript