我整个div都是可点击的。 指针位于div区域时如何在链接上进行悬停效果？

Question

http://www.grandeformato.com/new/

在滑块下，我有一个名为product-section的部分，其中包含可点击的div。 该div的“悬浮”的CSS是：

.product-section ul li:hover
{
    box-shadow: 0px 0px 6px 0px #ccc;
}
.product-section ul li a h4:hover
{
    color: #FF601A;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
}

如您所见，只有当指针位于链接上方时，链接才会变为橙色（FF601A）。 当指针位于整个div上时，是否也可能变为橙色？

Answer 1

当然可以！

您可以在父级上使用：hover扇区来更改子级的属性。

.product-section ul li:hover a h4 {
    color: #FF601A;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
}

Answer 2

这取决于在代码中添加:hover的位置。 现在，当li或h4悬停时，它会发生变化（颜色或盒子阴影）。

如果将：hover移到代码的另一部分（例如.product-selection:hover ul li a h4 ），则当该元素悬停时，相应的子元素将更改状态。

我已经完成了一支有div ， ul和2 li的笔 ，每个笔都有一个链接。 当您将:hover在div ，两个li都有一个box-shadow并且.product链接会更改颜色。