CSS3 / переход / изменить цвет шрифта на Grand-Grand Grade

Question

Я играю с переходом CSS3.Я надеюсь, что мой вопрос не будет слишком большим нубом и реалистичным :) В основном, когда пользователи мыши на курсе некоторых элементов, я поменял через CSS цвет текста.

Теперь проблема, в которой у меня есть проблема: у меня есть коробка div с именем продукта, который включен в элемент мастера пролета, который также содержит другие данные. Я хотел бы изменить цвет своего продукта всякий раз, когда пользователи превышают элементы мастера.

Для того, чтобы быть более точным, вот HTML-код:

<span class="wrapper_productbox">
<a href="P1.html" title="" class="product-image"><img src="P1.jpg" width="210" height="210" alt=""/></a>
<div class="categoryProductBox">
    <div class="product-name">
        <a href="P1.html" title="PRODUCT NAME">PRODUCT NAME</a>
    </div>
</div></span>

.

Так, чтобы подвести итоги, я хотел бы знать, есть ли путь в CSS, чтобы изменить цвет шрифта элемента имени продукта элемента всякий раз, когда пользователи наведите элемент Wrapper_Productbox или элемент продукта.

Большое спасибо за вашу помощь :)

Answer 1

Два варианта

каждый немного другой.

Это активирует зависание по адресу даже белое пространство в поле GenaCodicetacode ( пример):

.wrapper_productbox:hover .product-name a {
    color: red;
}

.

Это активирует только на паре за два теги Gensacodicetacode внутри .wrapper_product ( пример):

a:hover + .categoryProductBox a,
.categoryProductBox a:hover {
    color: red;
}

.

Answer 2

Вот демонстрация использовала немного jQuery.Если вы предпочитаете чистые CSS, вы должны немного построить свой HTML-код немного и определенно, чтобы обернуть свой раздел с Diver, а не промежуток, потому что пролет будет иметь очень короткую высоту, и не будет реагировать на вашу колебание.

$('.wrapper_productbox').hover(
    function() {
    $('.product-name a').css('color','green');
    },function() {
    $('.product-name a').css('color','#000');
    }
);

.