开发者

Javascript menu that hovers over initial element

I'm trying to build a javascript menu using prototype that when you mouseover an element, that element is hidden and a bigger element is shown in its place that closes onmouseout. This is what I have so far to give you an idea, but it doesn't work and is buggy. I'm not sure what the best general approach is:

EDIT: using the prototype refactor from 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();
  }); 
}

EDIT: The main problem now is that the second bigger menu(social_menu) that is shown on top of the smaller mouseover triggering element(share_words) only closes when you mouseout the smaller trigger element even though this element is hidden.

EDIT: This is the html and css I am us开发者_如何转开发ing:

<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;
}

Thanks for any help.


You're not using prorotype...try this

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

But i'll need your html code to be more helpful

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜