CSS3 /转换/改变大宏伟父母的字体颜色

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中是否有一种方法，以便在用户鼠标上窥探主包装盒元素或产品 - 图像A元素时更改产品名称的字体颜色。

非常感谢您的帮助:)

Answer 1

两个选择

每个略有不同。

这将在.wrapper_product框中的白色空间上悬停在上悬停（小提琴示例））：

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

.

这将只激活在两个生成的悬停中悬停 the a（小提琴示例）：

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

.

Answer 2

这里的demo

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

.