html - CSS 将内部元素悬停在外部悬停上

Question

我想通过悬停图像将悬停状态应用于以下链接的内部输入元素:

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

因此，悬停图像应该导致与悬停按钮相同的状态(右侧状态 - 按钮为绿色)

有没有办法只用 CSS 来实现这一点？

编辑:作为 btn-u 的悬停类已经存在，我不想重新定义这些值并希望从 a:hover 进行引用申请btn-u:hover还有

Answer 1

您可以使用background-image CSS 属性

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/

编辑 1 -

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