1

たとえば、次のコードがあるとします。

HTML：

<ul>
    <li>
        <a>
            <span class="title">Home</span>
            <span class="description">My House</span>
        </a>
    </li>
    <li>
        <a>
            <span class="title">About</span>
            <span class="description">Foo</span>
        </a>
    </li>
</ul>

li要素にカーソルを合わせたときの外側のグロー効果のように、タイトルクラスのみをグローにするにはどうすればよいですか。

このプラグインを見つけました：http：//nakajima.github.com/jquery-glow/ですが、自分のニーズに合わせてプラグインを機能させる方法がわかりません。編集：それはテキストシャドウに依存しているので、それは本当に私が探しているものではありません。

これをie7+で機能させたかったので、テキストシャドウを実際に使用することはできません。<

4

3 に答える 3

2

あなたが興味を持っているそのコード（あなたが投稿したリンク）のビットはこれです：

$(this).animate({
        color: TO_GLOW_TEXT_COLOR,
        textShadow: {
          begin: true,
          color: TO_GLOW_HALO_COLOR,
          radius: GLOW_RADIUS
        }
      }, DURATION);

それはテキストを輝かせます。（大文字のビットを変更します）。そしてこれはそれを再び衰退させます：

$(this).animate({
        color: ORIGINAL_COLOR,
        textShadow: {
          begin: false,
          color: TO_GLOW_HALO_COLOR,
          radius: GLOW_RADIUS
        }
      }, DURATION);

したがって、秘密がわかったので、これらのリンクで通常のhover（）を実行できます（これにより、要素のホバーがテストされ、a要素のみが光りspan.titleます）。

$('ul li a').hover(function(){
    $(this).find('span.title').animate({.....}); // fade in
},
function(){
    $(this).find('span.title').animate({.....}); // fade out
});

問題-CSSの代わりにjqueryを使用してtextShadowを設定するだけなので、textShadowが機能しない場合、これはIE7では機能しません。

PS：あなたが投稿したリンクはFirefoxでも機能しません-私のFirefoxが壊れていない限り。

于 2011-06-16T12:57:52.897 に答える
0

「どうすれば物事を輝かせることができますか？」または、「グローを必要な要素に向けるにはどうすればよいですか？」と質問しています。

後者が必要な場合は、次のようにします。

$(document).ready(function(){
        $('li').hover(
            function(){
                $(this).find('.title').addClass('glow');
            },function(){
                $(this).find('.title').removeClass('glow');
            }
        );
});

タイトル要素を光らせるには、「glow」クラスを追加するだけで十分であると想定します。

于 2011-06-16T13:00:18.020 に答える
0 
$("li").hover(function()
{
    //mouse over
    var s = $(this).children("a").children("span");

    for(element in s)
    {
        if(element.hasClass("title"))
        {
            //add glow to element
        }
    }
},
function()
{
    //remove glow here in a similar way
});

また、マークアップに一貫性がある場合は、すべてをループするのではなく、最初の要素を選択するだけで、s[0]にグローを追加するだけでよいことに注意してください。

children（）呼び出しを連鎖させるのではなく、おそらくあなたの目的にさらに適していると思います。http://api.jquery.com/find/

于 2011-06-16T12:56:38.440 に答える