Hover over a div and apply a background color to another div

Question

My code is here… https://jsfiddle.net/1r9me7rc/2/

So this is the look I want… when I roll over an image, it gets tinted 50% magenta and the text changes to magenta. Great.

However, when I roll over only the text , the image does not change. This is wrong, and I want it to behave like the previous example.

I'm using .span4 .jobimage because .jobimage is inside the div .span4 . I thought that would do the trick, but I just can't get it working.

I'd like to do this with CSS if possible, not Javascript, but if there's no other way then Javascript is fine. Any help would be appreciated.

Answer 1

You could apply the hover to the top level span instead of the items within it, eg.

.span4:hover a {
  color: magenta;
  text-decoration: none;
}

.span4 .jobimage {
  display: inline-block;
  position: relative;
}

.span4 .jobimage:after {
  opacity: 0;
}

.span4:hover .jobimage:after {
  content: '';
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: magenta;
  opacity: 0.5;
}

This way hovering anywhere in that div will apply the magenta. Seems to work here - https://jsfiddle.net/w2fkv9b1/