CSS悬停孩子触发对父母的影响 [英] Css hover child to trigger effect on parent

问题描述

我有以下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悬停孩子触发对父母的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！