将鼠标悬停在div上会影响其他div上的wordpress小部件

时间:2013-12-30 15:12:04

标签: javascript php jquery wordpress css3

网址:http://revivo.outit.co.il/

问题:我想将鼠标悬停在滑块图像上(使用红色接收器),其上方的标题将显示:无。问题是它有两个不同的插件。

我试过了:

.advps-slide:hover ~ .textwidget {
    display: none;  
}

另一次尝试:

.advps-slide:hover ~ .main-shaddow{
    display: none;  
}

我也试过JS:

$('.advps-slide').mouseover(function() {
   var $this = $(this);
   var id = $this.attr('rel');
   var $currentWidget = $('.' + id);
   $currentWidget.show().siblings('.main-shaddow').hide();
});
$('.main-shaddow').mouseleave(function() {
    $('.textwidget').hide();
});

但没有。

Html(至少包含小部件和滑块的部分:

在sidebar.php上:

<div class="main-border"><?php echo do_shortcode('[advps-slideshow optset="4"]'); ?></div>
<div class="main-shaddow">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('title-widget') ) :    
?> <?php    endif;  ?></div>

在functions.php上:

    register_sidebar( array(
    'name'          => __( 'Title-Main-Page', 'revivo_official2' ),
    'id'            => 'title-widget',
    'before_widget' => '<aside id="%1$s" class="widget-title-main">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h1 class="widget-title">',
    'after_title'   => '</h1>',
) );

甚至可能吗?

1 个答案:

答案 0 :(得分:2)

这是一些jQuery,试一试

$('.advps-slide').hover(function() {
    $('.widget-title').toggle();
});

如果不起作用,请尝试

$('.advps-slide').hover(function() {
    $('#title-widget .widget-title').toggle();
});

编辑:

另外,使用wordpress你可能不得不这样做。

jQuery('.advps-slide').hover(function() {
    jQuery('.widget-title').toggle();
});

另外,请确保它位于头部标签内的某处。 (它可以来自googleapis网址,但其他网站也可以托管jquery文件,例如jquery.com)

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>