0

私は WordPress で作業しており、functions.php ファイルにショートコード関数を書きました:

// shortcode function for call to action boxes
function actionbox( $atts , $content = null ) {

// Attributes
extract( shortcode_atts(
    array(
        'image' => 'URL',
        'title' => 'Title',
        'url' => 'Link',
    ), $atts )
);

// Code
return '<a class="ctalink" href="' . $url . '">
<div class="ctabox" style="background-image: url(' . $image . '); width: 350px;">
<div class="ctainner">
<div class="titlebox"><h1 class="ctatitle">' . $title . '</h1></div>
<h4 class="ctabutton">' . $content . '</h4>
</div>
</div></a>';
}
add_shortcode( 'CTA', 'actionbox' );

次に、jQuery を追加して、ショートコードによって作成された行動を促すフレーズのボックスにアニメーションを追加しました。

問題は、すべてが機能しているときに、ボックスの 1 つにカーソルを合わせると、アニメーションがすべてのボックスに適用されることです。

これが私のすべてのコードです： http://jsfiddle.net/sahiba25/kGryV/4/

実際にホバリングしている1つのボックスだけでアニメーションを実行する方法についてのアイデアはありますか?

私はすでに addClass を試しましたが、「アクティブな」クラスをボックスのすべてのインスタンスに追加します。

ありがとう！

4

1 に答える 1

1

イベント ハンドラーでthisは、イベントのターゲットです。したがって、あなたの場合、次のようなことができます：

$('.ctainner', this)

.ctainnerイベントターゲットの子孫であるクラスを持つ要素を選択します。

別のオプションは次のとおりです。

$(this).find('.ctainner')

これは本質的に同じことを行います。

于 2013-09-04T01:34:10.780 に答える