Css悬停子级以触发对父级的影响

Css hover child to trigger effect on parent(Css悬停子级以触发对父级的影响)

问题描述

我有这个 HTML 代码:

I have this HTML code:

<span id="search">
 <input type="submit" value="" id="button">
</span>

我想在悬停#button

#button:hover #search::after {opacity:1;}

它不会工作，所以我想知道它是否可能这样做.

It wont work so I wonder if its even possible to do this.

推荐答案

只使用 CSS 是不可能的.

Using only CSS It's impossible.

你可以做的是使用 JavaScript/Jquery 来触发一个动作，像这样:

What you can do is to use JavaScript/Jquery to trigger a action, like this:

$("#button").hover( function() {
   $(this).parent().addClass("hover");
});

在你的 CSS 中:

#search.hover::after {opacity:1;}

相关:是否有 CSS 父选择器?

这篇关于Css悬停子级以触发对父级的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！