Создание меню подскажите
Задача вот какая , создаю выпадающее меню.
Структура такая : ряд дивов с одинаковым классом и внутри дива еще див со списком ссылок изначально 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 , подскажите. |
<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>
|
walik,
Спасибо, я сначала пытался сделать с помощью css но писал :hover div а оно не срабатывала, а про класс я как то не подумал. |
| Часовой пояс GMT +3, время: 22:24. |