Question

I have four text boxes all with similar code. Each one on hover fades out and displays an image behind it via CSS3 transition. But with the box’s title I need the same thing to occure so I wrote a small chunk of code to do this. The only issue I can’t solve is getting the hover title effect to work for only its fellow <section> partner. I know I can write 4 different chunks of code to do this each having different classes, but that’s annoying and if I don’t have to I’d rather not.

My 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>

The CSS part is working great when hovering over images I get the fade out effect I was looking for. Now I just want to select the “txtbox-main-img” class of the <a> tag when hovering over the <txt-box-title> <a> tag.

My jQuery is selecting all of the boxes, obviously, because they have the same class. But I’d rather not write 4 different pieces of hover code if I don’t have to.

My jQuery

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

My CSS in case it is needed:

.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

Try using the following:

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

The above works on the assumption that you want to perform the same actions as you posted in your hover() code on the .txtbox-main-img element while hovering over the .txt-box-title element.

I’d suggest, though, that instead of directly manipulating the style of the element, that you add, and remove, a class to manipulate the presentation:

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

And define the faded class in your CSS:

.faded {
    opacity: 0;
}

References:

• addclass().
• removeClass().
• siblings()