4ndro1d 4ndro1d - 1 year ago 134
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>

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
already exists, I don't want to redefine those values and want to reference from
to apply
as well

Answer Source

You could use the background-image CSS property


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


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 -