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

Question

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

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

因此，悬停图像应该会产生与悬停按钮相同的状态（右侧状态 - 按钮为绿色）

有没有办法用CSS实现这个目标？

编辑：由于btn-u的悬停类已经存在，我不想重新定义这些值，并希望从a:hover引用以应用btn-u:hover < / p>

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/

Answer 2

是的，只需扩展css属性。

以下是一个示例，只需将a:hover .btn-u添加到css您想要的内容

＆＃13;

＆＃13;

a:hover .btn-u{
  font-size:24px;
}

＆＃13;

<a href="#"><img  src="https://s.zkcdn.net/Advertisers/bc85dff2b3dc44ddb9650e1659b1ad1e.png">
    <input type="button" class="btn-u" value="Hackschnitzel">
</a>

＆＃13;

＆＃13;

＆＃13;