CSS悬停在外部悬停上的内部元素[重复]答案

【问题标题】：CSS hover inner element on outer hover [duplicate]CSS悬停在外部悬停上的内部元素[重复]
【发布时间】：2016-09-12 22:26:37
【问题描述】：

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

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

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

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

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

【问题讨论】：

您的标记无效，input 不允许在 <a> 元素中。
另外，重复的标题是一个红鲱鱼。这是完全相同的概念，只是标记不同。
你是对的，只是为了布局。将更改为普通 div
你能添加重复的链接吗？
我更新了问题以使我的意图更加清晰。

标签： html css hover

【解决方案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/

【讨论】：

请看我更新的问题。
我认为是一样的想法，请查看我的anwser的编辑1

【解决方案2】：

是的，只是扩展 css 属性。

这里是一个例子，只需将a:hover .btn-u添加到你想要的css中

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

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

【讨论】：

我更新了问题请再看看