JQuery выбрать элемент внутри коллеги Div, но не другие - PullRequest
Новая
       17

JQuery выбрать элемент внутри коллеги Div, но не другие

1 голос
/ 07 марта 2012

У меня есть четыре текстовых поля с одинаковым кодом. Каждый из них при наведении мыши исчезает и отображает изображение за ним с помощью 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-часть отлично работает, когда при наведении курсора на изображения я получаю эффект затухания, который искал. Теперь я просто хочу выбрать класс txtbox-main-img тега <a> при наведении курсора на тег <txt-box-title> <a>.

Мой 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;
}

1 Ответ

1 голос
/ 07 марта 2012

Попробуйте использовать следующее: 

$('.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;
}

Ссылки:

...