4ndro1d 4ndro1d - 2 months ago 17
CSS Question

CSS hover inner element on outer hover

I would like to apply the hover state to the inner input element of the following link by hovering the image:

<a href="#"><img src="img.png">
<div class="btn-u">Hackschnitzel</div>
</a>


So hovering the image should result in the same state as hovering the button (right state - button is green)

enter image description here

Is there a way to achieve this with CSS only?

EDIT: As the class for hover of
btn-u
already exists, I don't want to redefine those values and want to reference from
a:hover
to apply
btn-u:hover
as well

Answer

You could use the background-image CSS property

HTML:

<a href="#">
    <input type="button" class="btn-u" value="Hackschnitzel" />
</a>

CSS:

a {
  background-image: url('https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg');
  background-size: cover;
  display: inline-block;
  width: 200px;
  height: 150px;
}
a:hover {
  background-image: url('http://www.underconsideration.com/brandnew/archives/yahoo_logo_detail.png');
}

a input { color: #fff; font-weight: 700; background-color: #ff0000; }
a:hover input { background-color: #00ff00; }

JSFiddle: https://jsfiddle.net/1oj3ddft/

Edit 1 -

https://jsfiddle.net/1oj3ddft/1/