我的整个 div 是可点击的。当指针在 div 区域时，我可以在链接上制作悬停效果吗？

Question

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

在滑块下方，我有一个名为产品部分的部分，带有可点击的 divs。 div 的 "hover" 的 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;
}

正如您所见，link 只有在指针位于其上时才会变为橙色 (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），则当悬停该元素时，相应的子元素将更改状态。

我做了一个 pen，其中有一个 div、一个 ul 和 2 个 li，每个都有一个 link。当您 :hover 和 div 时，两个 li 都有一个 box-shadow 并且 link .product 会改变颜色。

我的整个 div 是可点击的。当指针在 div 区域时，我可以在链接上制作悬停效果吗？

my whole div is clickable. can I make hover effects on links when the pointer is in the div area?

html

css

hover