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 来将动画添加到由我的短代码创建的号召性用语框中。

问题是，当一切正常时，当我将鼠标悬停在一个盒子上时，动画会自动应用于所有盒子。

这是我所有的代码：http: //jsfiddle.net/sahba25/kGryV/4/

关于如何让动画仅在我实际悬停的一个盒子上播放的任何想法？

我已经尝试过 addClass，但它会将“活动”类添加到框的所有实例中。

谢谢！

4

1 回答 1

1

在您的事件处理程序中，this是事件的目标。因此，在您的情况下，您可以执行以下操作：

$('.ctainner', this)

它选择具有作为.ctainner事件目标后代的类的元素。

另一种选择是：

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

这基本上做同样的事情。

于 2013-09-04T01:34:10.780 回答