Is there a way to apply styles to a parent element when hovering over child?

Question

I have a with a link inside. I want to style said when I hover over the link.

<div class="video">
   <div class="video-interior">
      <a href="#">LINK</a>
   </div>
</div>

When I hover over the 'a' tag I want to apply styles to the outermost div.

Is that possible?

you need to use jquery for this. – Suresh Ponnukalai Jun 11 '14 at 13:50 — Suresh Ponnukalai, Jun 11 '14 at 13:50
No, you can't traverse *up* the DOM in CSS. – Nick R Jun 11 '14 at 13:53 — Nick R, Jun 11 '14 at 13:53

score 0 · Answer 1 · answered Jun 11 '14 at 13:51

0

No, you can't access parent elements with current CSS implementations.

But you can use the :hover pseudo class on the parent element directly, which is the most obvious solution here.

.video:hover {
    background: red;
}

answered Jun 11 '14 at 13:51

feeela

This is the only thing I could think of but It doesn't work well in IE. Thanks for your time anyway. – Toni Romero Jun 11 '14 at 13:55
it depends on the actual context. e.g if the `.video` contains other elements, hovering on other element also trigger this and change the background color, while if we only want hovering ***on the link*** inside to change the background, this won't work expectedly. – King King Jun 11 '14 at 13:55
@ToniRomero "It doesn't work well in IE" This is only true for IE 7 and older. Those browsers have a market share of roughly 0.5%. Besides of that it works perfectly fine in all browsers of the last three years. – feeela Jun 11 '14 at 14:30

score 0 · Answer 2 · edited Jun 11 '14 at 13:53

0

You can apply the hover to the div which contains the <a> tag and this will give the effect you describe:

CSS :

.video:hover { /* your stylings */ }

edited Jun 11 '14 at 13:53

web-tiki

answered Jun 11 '14 at 13:53

JDTLH9

score 0 · Answer 3 · answered Jun 11 '14 at 13:58

0

here is a jQuery example:

$(function()
{
   $('.video .video-interior a').on('hover',function()
   {
       $(this).parent().parent().css('background','#f00');
   }
});

answered Jun 11 '14 at 13:58

0x3d

3 Answers3