Javascript菜单悬停在初始元素

Question

我试图建立一个JavaScript菜单使用原型，当你鼠标悬停一个元素，该元素是隐藏的，并在其关闭onmouseout的地方显示一个更大的元素。这是我迄今为止给你的一个想法，但它不工作，并且是越野车。我不知道最好的一般的方法是什么：

编辑：使用从雷米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; 
} 

感谢您的帮助。

Answer 1

您没有使用prorotype ......试试这个

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代码，以提供更多的帮助