Меню Javascript, которое наводит курсор на начальный элемент - PullRequest
0 голосов
/ 10 марта 2010

Я пытаюсь создать меню 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;
}

Спасибо за любую помощь.

1 Ответ

0 голосов
/ 10 марта 2010

Вы не используете проротип ... попробуйте это

function socialLinkInit(){    
  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();      
  });   
}

Но мне понадобится ваш HTML-код, чтобы быть более полезным

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...