CSS3 / переход / изменить цвет шрифта на Grand-Grand Grade
Вопрос
Я играю с переходом 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 или элемент продукта.
Большое спасибо за вашу помощь :)
Решение
Два варианта
каждый немного другой.
Это активирует зависание по адресу даже белое пространство в поле GenaCodicetacode ( пример):
.wrapper_productbox:hover .product-name a {
color: red;
}
.
Это активирует только на паре за два теги Gensacodicetacode внутри .wrapper_product
( пример):
a:hover + .categoryProductBox a,
.categoryProductBox a:hover {
color: red;
}
. Другие советы
Вот демонстрация использовала немного jQuery.Если вы предпочитаете чистые CSS, вы должны немного построить свой HTML-код немного и определенно, чтобы обернуть свой раздел с Diver, а не промежуток, потому что пролет будет иметь очень короткую высоту, и не будет реагировать на вашу колебание.
$('.wrapper_productbox').hover(
function() {
$('.product-name a').css('color','green');
},function() {
$('.product-name a').css('color','#000');
}
);
.