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

Question

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

under the slider I have a section called product-section with clickable divs. the css of the "hover" of that div is:

.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;
}

and as you can see the link becomes orange (FF601A) only when the pointer is over it. Is it possible for it becoming orange also when the pointer is over the whole div?

Answer 1

Sure thing!

You can use the :hover sector on a parent to change the child's properties.

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

Answer 2

It depends on where you add the :hover in your code. At the moment you have it do when the li or the h4 are are hovered, something changes (the color or the box-shadow).

If you move the :hover to another part of the code (eg, .product-selection:hover ul li a h4 ) then when that element is hovered, the appropriate child element will change state.

I've done a pen which has a div , a ul , and 2 li 's,each with a link. When you :hover the div , both li 's have a box-shadow and the link .product changes color.