0

我希望将鼠标悬停在我的列表项上，并产生类似于 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);
        }
    });
});
4

2 回答 2

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);
    }
});
于 2012-12-19T04:44:55.120 回答
0

jsBin 演示

  $('#menu-seo').on('mouseenter mouseleave',function( e ){
    var mEnt = (e.type=='mouseenter');
    $('#menu-seo-desc').stop().fadeTo(600, mEnt?1:0 );
  });
  • mEnt将根据事件类型返回布尔值true//false 。e
  • 三元运算符将mEnt?[true]:[false]分别做和fadeTo([time], [1/or/0])
  • 此外，选择器是：$('#menu-seo-desc')
于 2012-12-19T04:49:09.027 回答