Question

什么是最好的方式来实现右边的那种“onmouseover选项”菜单＆＃39;存在于Google阅读器的每个Feed或Gmail-＆gt;收件箱，已发送等中？

自编码javascript + CSS？或者jQuery能否更轻松地实现它？

Answer 1

$('element').hover(function(){
    //code
});

或者

$('element').on('hover', function(){
    //code
});

Answer 2

EXAMPLE DEMO

我不知道你对jQuery有多少经验......以下是我在演示中使用的代码：

$('#nav li').hover(function(){
    $('#description').hide();
    $('span', this).stop(1).fadeTo(300,1);
},function(){
    $('span', this).stop(1).fadeTo(300,0);
});

$('#nav span').click(function(){
   var spanPosT = $(this).offset().top;
   var spanPosL = $(this).offset().left;
   $('#description').css({left:(spanPosL+24)+'px',top:spanPosT+'px'}).fadeTo(300,1);
});

$('#description').mouseout(function(){
  $(this).hide();
});

HTML：

<div id="description"></div>
<div id="nav">  
  <ul>
    <li>Option 1<span>+</span></li>
    <li>Something 2<span>+</span></li>
    <li>Else 3<span>+</span></li>
  </ul>
</div>

CSS：

  ul{
    list-style:none;
  }

  #nav li{
    position:relative;
    width:120px;
    background:#f3f3f3;
    margin:3px 0;
    padding:2px 10px;
    color:#666;
    text-shadow:0px 1px 0px #fff;
    cursor:pointer;
  }
  #nav li:hover{
    background:#eee;
  }
  #nav li span{
    display:none;
    border-left:1px solid #bbb;
    position:absolute;
    right:0px;
    padding:0 6px;
    color:#777;
  }
  #nav li span:hover{
    background:#fff;
    color:#444;
  }
  #description{
    display:none;
    position:absolute;
    z-index:2;
    background:#eee;
    border:1px solid #777;
    width:250px;
    height:120px;
    padding:15px;
  }

如果您不知道如何使用适当的内容点击该区域，请告诉我

Answer 3

你的意思是当鼠标在菜单上时背景颜色会改变吗？然后你可以使用CSS

例如

a:hover {
  background-color: #ccc;
}

https://developer.mozilla.org/en/CSS/%3Ahover

Answer 4

Here is Example

<强> HTML：

<div id="hoverable"><span id="arrow"></span>Hoverable
    <ul id="options">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
    </ul>
</div>

<强> CSS：

#hoverable
{
    text-align: left;
    padding:5px;
    background:#eee;
    border:1px solid #ddd;
    width:120px;
    height:30px;
    position:relative;
    line-height:28px;
}

#options
{
    position:absolute;
    display:none;
    list-style:none;
    background:#ddd;
    width:100px;
    display:none;
    margin:0;
    padding-left:15px;
    border:1px solid #333;
    color: #000;
}

#options li
{
    padding: 5px 0 5px 5px
}

#arrow
{
    width:15px;
    height:15px;
    border-radius: 3px;
    background:#fff;
    float:right;
    margin-right:8px;
    margin-top:8px;
    display:none
}

<强> jQuery的：

$(function() {
    $("#hoverable").on('mouseenter',
    function(e) {
        $(this).css({
            background: '#000',
            opacity: 0.8,
            color: '#fff'
        }).find('#arrow').show().css({
            display: 'block'
        });
    }).on('mouseout',
    function(e) {
        if ($('#arrow').is(':visible') && !$('#options').is(':visible')) $('#arrow:visible').hide();
        $(this).css({
            background: '#eee',
            opacity: 1,
            color: '#000'
        });
    });
    $('#arrow').on('click',
    function() {
        if ($('#options', $(this).parent()).is(':visible')) {
            $('#options').hide();
        } else {
            $(this).parent().find('#options').show().css({
                top: $(this).parent().height() + 'px',
                left: $(this).position().left + 'px'
            });
        }
    }).on('mouseenter',
    function() {
        $(this).show().parent().css({
            background: '#000',
            opacity: 0.8,
            color: '#fff'
        });
    });
});

每个td li标签上的Onmouseover选项菜单

4 个答案:

EXAMPLE DEMO