/让div出现

Question

我希望在我的列表项目上盘旋，并产生类似于facebook聊天之类的效果，这是我最好的例子。我能够让第一个div出现，但我相信这可能是一个选择器问题，因为我无法让其他部分正常工作。

html

<ul id="menu_seo" class="menu">
    <li id="menu-seo"><span class="arrowout1"></span>SEO</li>
    <li id="menu-siteaudits"><span class="arrowout2"></span>Site Audits </li>
    <li id="menu-linkbuilding"><span class="arrowout3"></span>Link-Building</li>
    <li id="menu-localseo"><span class="arrowout4"></span>Local SEO</li>
</ul>
<div id="main_content">
    <div id="menu-seo-desc">
        <p>SEO management begins with a full website diagnosis of current web strategy Adjustments are made to improve your site's ability to rank higher on search engines and draw more traffic </p>
    </div>
    <div id="menu-seo-desc2">
        <p>Usability & site architecture review, Search Engine accessibility and indexing, Keyword research & targeting and Conversion rate optimization </p>
    </div>
</div>

css

#menu-seo-desc {
    height: 125px;
    width: 210px;
    background-color: red;
    border-color: #CCC #E8E8E8 #E8E8E8 #CCC;
    border-style: solid;
    border-width: 1.5px;
    border-radius: 5px;
    box-shadow: 1px 0 2px 0px #888;
    -moz-box-shadow: 1px 0 2px 0px #888;
    -webkit-box-shadow: 1px 0 2px 1px #888;
    position: absolute;
    top: 220px;
    left: 350px;
    display: none;
}

Javascript

$(document).ready(function() {

    $('#menu_seo').on('#menu-seo', {
        'mouseenter': function() {
            $('#menu-seo-desc').fadeIn(600);
            $('#menu-seo-desc2').fadeIn(600);
        },
        'mouseleave': function() {
            $('#menu-seo-desc').fadeOut(300);
            $('#menu-seo-desc2').fadeOut(300);
        }
    });
});

Answer 1

.是一个类选择器，使用#作为id。

将$('.menu-seo-desc')更改为$('#menu-seo-desc')

和$('.menu-seo-desc').fadeOut(300);到$('#menu-seo-desc').fadeOut(300);

建议

可以将多个事件绑定到相同的元素，如下所示。

$('#menu_seo').on('#menu-seo', {
    'mouseenter': function() {
        $('#menu-seo-desc').fadeIn(600);
    },
    'mouseleave': function() {
        $('#menu-seo-desc').fadeOut(300);
    }
});

更新

// bind mouseenter and mouseleave for both selectors
$('#menu-seo, #menu-siteaudits').on('mouseenter mouseleave', function(e) {
    // get the related container
    $element = $(this).is('#menu-seo') ? $('#menu-seo-desc') : $('#menu-seo-desc2');
    // execute the action according to the event
    if(e.type == 'mouseenter') {
        $element.fadeIn(600);
    } else {
        $element.fadeOut(300);
    }
});

Answer 2

http://jsbin.com/eveluf/1/edit

  $('#menu-seo').on('mouseenter mouseleave',function( e ){
    var mEnt = (e.type=='mouseenter');
    $('#menu-seo-desc').stop().fadeTo(600, mEnt?1:0 );
  });

• mEnt将根据e事件类型返回布尔值true//false。
• 三元运算符将分别执行mEnt?[true]:[false]和fadeTo([time], [1/or/0])。
• 另外，选择器是：$('#menu-seo-desc')