Я пытаюсь создать меню javascript, используя прототип, чтобы при наведении указателя мыши на элемент этот элемент скрывался, и на его месте показывался элемент большего размера, закрывающий onmouseout. Это то, что у меня есть, чтобы дать вам идею, но она не работает и глючит. Я не уверен, что лучший общий подход:
РЕДАКТИРОВАТЬ: с использованием прототипа рефактора от remi bourgarel:
function socialMenuInit(){
var social_menu = $('sociable_menu');
social_menu.hide();
var share_words = $('share_words');
Event.observe(share_words,"mouseover",function(){
share_words.hide();
social_menu.show();
});
Event.observe(social_menu,"mouseout",function(){
social_menu.hide();
share_words.show();
});
}
РЕДАКТИРОВАТЬ: Основная проблема теперь заключается в том, что второе большее меню (social_menu), которое отображается поверх меньшего элемента запуска при наведении курсора мыши (share_words), закрывается только при наведении мыши на меньший элемент запуска, даже если этот элемент скрыт.
РЕДАКТИРОВАТЬ: Это HTML и CSS я использую:
<div id="share_words">share</div>
<div id="sociable_menu"></div>
#share_words{
display: none;
border: 1px solid white;
position: absolute;
right: 320px;
top:0px;
padding: 4px;
background-image: url('/images/icons/group.png');
background-repeat: no-repeat;
background-position:7px 6px;
text-indent:26px;
color: white;
z-index: 15;
}
#sociable_menu{
border: 1px solid black;
padding: 5px;
position: absolute;
right: 275px;
top: -10px;
z-index: 20;
}
Спасибо за любую помощь.