Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   onmouseout, onmouseover (https://javascript.ru/forum/dom-window/22579-onmouseout-onmouseover.html)

lolka84 25.10.2011 19:15

onmouseout, onmouseover
 
Всем привет.
Возникла необходимость сделать простое всплывающее меню. Т.е. при наведении на некоторый элемент должен появляться div, а при onmouseout уже на этом диве он должен пропадать.
Проблема в том, что внутри этого дива есть список, следовательно, когда курсор переходит на него, див пропадает :)

<div id="one" style="width:100px; height:100px; background:#333;" onMouseOver="document.getElementById('two').style.display = 'block';"></div>
    
<div id="two" style="width:200px; height:100px; background:#999; margin:20px 0 0 0; display:none;" onMouseOut="document.getElementById('two').style.display = 'none';">
    
    <ul>
        
        	<li>1</li>
        	<li>1</li>
        	<li>1</li>
        	<li>1</li>
        
    </ul>
    
</div>


Как решить проблему ?
Заранее благодарю!

ksa 25.10.2011 19:42

Цитата:

Сообщение от lolka84
при наведении на некоторый элемент должен появляться div

Может пример сделаешь полный? Поскольку не понятно про какой "некоторый элемент" идёт речь... :)

walik 25.10.2011 19:46

При mouseout проверять есть ли у элемента на который перешли в родителях эта дивка, и если нету то тогда выполнять что надо

lolka84 25.10.2011 19:51

Есть список <ul></ul>, тобишь обычное меню.
При наведении на один из пунктов должен рядом появляться div с другим списком <ul></ul>, типа подменю :)

<ul>
    
        <li>1</li>
        <li id="one" onMouseOver="document.getElementById('two').style.display = 'block';">1</li>
        <li>1</li>
        <li>1</li>
    
    </ul>
        
    <div id="two" style="width:200px; height:100px; background:#999; margin:20px 0 0 0; display:none;" onMouseOut="document.getElementById('two').style.display = 'none';">
    
    	<ul>
        
        	<li>1</li>
        	<li>1</li>
        	<li>1</li>
        	<li>1</li>
        
        </ul>
    
    </div>

lolka84 25.10.2011 19:52

Цитата:

Сообщение от walik (Сообщение 132747)
При mouseout проверять есть ли у элемента на который перешли в родителях эта дивка, и если нету то тогда выполнять что надо

Счас попробую, спасибо :)

ksa 25.10.2011 20:01

Цитата:

Сообщение от lolka84
При наведении на один из пунктов должен рядом появляться div с другим списком <ul></ul>, типа подменю

Как вариант...

<style type="text/css">
.submenu {
	display: none;
}
.menu > li:hover > .submenu {
	display: block;
}
</style>
<ul class='menu'>
	<li>1
		<ul class='submenu'>
			<li>1 1</li>
			<li>1 2</li>
			<li>1 3</li>
			<li>1 4</li>
		</ul>
	</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

lolka84 25.10.2011 20:13

Цитата:

Сообщение от ksa (Сообщение 132752)
Как вариант...

Не пойдет, меню, которое должно появляться, не является дочерним к тому, на которое наводим курсор :(

С проверкой на родителя чот не выходит.
Получается, когда на появившемся диве курсор попадает на список, срабатывает событие onmouseout. Как в этот момент проверить, является ли этот див родителем у списка ?

ksa 25.10.2011 20:31

Цитата:

Сообщение от lolka84
меню, которое должно появляться, не является дочерним к тому, на которое наводим курсор

Что мешает его сделать дочерним?

lolka84 25.10.2011 20:34

Цитата:

Сообщение от ksa (Сообщение 132760)
Что мешает его сделать дочерним?

Да впринципе нечего, попробую, спасибо.


Часовой пояс GMT +3, время: 12:40.