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代码更有帮助

悬停在初始元素上的Javascript菜单

1 个答案: