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 に答える