Question

我有四个文本框都有类似的代码。悬停的每一个都淡出并通过CSS3过渡在其后面显示图像。但是使用盒子的标题我需要发生同样的事情所以我写了一小段代码来做到这一点。我无法解决的唯一问题是让悬停标题效果仅适用于其<section>伙伴。我知道我可以编写4个不同的代码块来执行此操作，每个代码都有不同的类，但这很烦人，如果我不需要，我宁愿不这样做。

我的HTML

<section class="home-text-box services" >
    <div class="txt-box-title">
        <h2 class="align-left">
            <a class="txtbox-link" href="<?php bloginfo('url'); ?>/services" class="txt-box font-droid" title="Services" alt="Services" >What We Offer</a>
        </h2>
    </div>

    <a href="<?php bloginfo('url'); ?>/services" ><div class="services-img"></div></a>
    <a class="txtbox-img txtbox-main-img" href="<?php bloginfo('url'); ?>/services" > <?php the_post_thumbnail('txt-box'); ?> </a>

</section>

当鼠标悬停在图像上时，CSS部分工作得很好我得到了我想要的淡出效果。现在，我只想在将鼠标悬停在<a> <txt-box-title>标记上时选择<a>标记的“txtbox-main-img”类。

我的jQuery显然选择了所有的框，因为它们具有相同的类。但如果我不需要，我宁愿不写4个不同的悬停代码。

我的jQuery

$('.txtbox-link').hover(function(){
    $('.txtbox-main-img').css('opacity' , '0.0');
},function(){
    $('.txtbox-main-img').removeAttr("style");
});

我的CSS，以防需要：

.txtbox-main-img {
    z-index: 10;
    opacity: 100;
    transition: opacity 0.25s linear;
    -moz-transition: opacity 0.25s linear;
    -webkit-transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
}

.txtbox-main-img:hover {
    opacity: .01;
    transition: opacity 0.25s linear;
    -moz-transition: opacity 0.25s linear;
    -webkit-transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
}

div.services-img {
    position: absolute;
    background: url('images/services-img.jpg');
    width: 200px;
    height: 122px;
    top: -1px;
z-index: -10;
}

Answer 1

尝试使用以下内容：

$('.txt-box-title').hover(function(){
    $(this).siblings('.txtbox-main-img').css('opacity' , '0.0');
},function(){
    $(this).siblings('.txtbox-main-img').removeAttr("style");
});

以上工作假设您希望执行与在hover()元素上的.txtbox-main-img代码中发布的操作相同的操作，同时将鼠标悬停在.txt-box-title元素上。

我建议，不要直接操作元素的style，而是添加和删除一个类来操作演示文稿：

$('.txt-box-title').hover(function(){
    $(this).siblings('.txtbox-main-img').addClass('faded');
},function(){
    $(this).siblings('.txtbox-main-img').removeClass('faded');
});

在CSS中定义淡出的类：

.faded {
    opacity: 0;
}

参考文献：

jQuery选择内部div的元素，但不是其他人

1 个答案: