懸停在初始元素上的Javascript菜單

Question

我正在嘗試使用原型構建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();
  }); 
}

編輯：現在的主要問題是，較小的鼠標懸停觸發元素（share_words）上方顯示的第二個較大的菜單（social_menu）僅在您將較小的觸發元素鼠標移出時關閉，即使該元素已隱藏。

編輯：這是我正在使用的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;
}

謝謝你的幫助。

Answer 1

您沒有使用原型...請嘗試

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代碼才能提供更多幫助