0

<p>特定の画像にカーソルを合わせると、タグ内のテキストを取得しようとしています。テキストを表示できず、コードが見栄えがするようです。誰かがテキストが表示されない理由を見つけるのを手伝ってもらえますか/

これがHTMLです

<div class="iconcontainerhover">
        <a rel="left" href="#"><img style="margin-right: 160px;" src="img/facebookicon.png" /></a>
        <a rel="middle" href="#"><img src="img/Twittericon.png" /></a>
        <a rel="right" href="#"><img style="margin-left: 160px" src="img/google_plus_icon.png" /></a>
    </div>
    <div id="descripinfo">
        <div id="lefticoncontent">
            <p id="left">This is information about the left icon</p>
        </div>
        <div id="middleiconcontent">
            <p id="middle">This is information about the middle icon</p>
        </div>
        <div id="righticoncontent">
            <p id="right">This is information about the right icon</p>
        </div>

これがjqueryです

$(function(){
     $('.iconcontainerhover a').mouseenter()(function(){
         var toShow = '#' + $(this).attr('rel');
         $('#discripinfo').show();
         $(toShow).show();
     }).mouseleave(function(){
         $('#discripinfo').hide();
     });
});

#discripinfoそのため、一致するimgにカーソルを合わせると、テキストをフェードインさせようとしていますiconcontainerhover。

ところで、#discripinfoタグはに設定されていますdisplay: none;

4

4 に答える 4

0

()その後mouseenter、そこにあるべきではない余分なものがあります。それ以外は、おそらく調べる必要がありますが、問題ないように見えます.hover。

編集：また、開いたコメントも非表示にしてください。非表示にしないと、すべての説明が一度に表示されてしまいます。

于 2013-03-06T23:20:21.680 に答える
0

使用できます$('#descripinfo').fadeIn();

ドキュメントから：http：//api.jquery.com/fadeIn/

于 2013-03-06T23:21:18.073 に答える
0

LIVE DEMO

$(function(){
     $('.iconcontainerhover a').on('mouseenter mouseleave', function( e ){

         $('#descripinfo > div').hide();       
         if(e.type=='mouseenter') $( '#'+this.rel+'iconcontent' ).show().siblings().hide();

     });
});
于 2013-03-06T23:25:29.650 に答える
0

JavaScriptにはいくつかのタイプミスがあります。これがあなたが書くべきものです。

$(function(){
    $('.iconcontainerhover a').mouseenter(function(){   
        var toShow = '#' + $(this).attr('rel') +'iconcontent';
        $('#descripinfo').show();
        $(toShow).show();
     }).mouseleave(function(){
        $('#descripinfo').hide();
     });
});

変更＃ 2）descripinfoの代わりに＃1）discripinfo左/右の後に「iconcontent」を追加します。 iconcontentを追加した理由は、おそらく実際には、内側のラッパーではなく、外側のラッパー全体を非表示/表示したいからです。視覚的には、スタイリングを適用すると、おそらくより正確に見えます。

左/右の中央を表示しているので、まだ期待どおりに動作していないと思います。#descripinfoを実行するときは、実際にそれらを非表示にして表示する必要があります。必要な感触を得るには、この1つの非表示をmouseenterに追加します。

        var toShow = '#' + $(this).attr('rel') +'iconcontent';
        $('#descripinfo').show();
        $('#descripinfo div').hide();
        $(toShow).show();

これが最後のjsFiddleです。

于 2013-03-06T23:26:50.283 に答える