Css悬停子项触发对父项的影响

Question

我有这个HTML代码：

Hamcrest

我希望在悬停<span id="search"> <input type="submit" value="" id="button"> </span>

时更改#search::after的不透明度

#button

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

Answer 1

仅使用CSS这是不可能的。

你可以做的是使用JavaScript / Jquery来触发一个动作，如下所示：

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

并在你的CSS中：

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

相关：Is there a CSS parent selector?

Answer 2

只有CSS才能实现这一点。您可以尝试使用Javascript来帮助解决此问题。

$("#button").on("mouseenter",function(e){
     $("#search:after").css({"opacity":1});
})

但是，为了使用伪类进行选择，你需要jQuery psuedo shim：

http://jquery.lukelutman.com/plugins/pseudo/jquery.pseudo.js

Answer 3

不，这是不可能的，因为CSS没有父选择器。

但是如果你可以更改你的html标记，那么你可以使用adjacent sibling选择器+

#button:hover + #search::after {
  content: "hovered"
}

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

`

Answer 4

搜索容器的大小是多少？它与孩子匹配吗？如果是这样，将悬停添加到搜索将实现相同的效果。否则，您需要重新排列标记或使用javascript。我只是为了简单的解决方案。

Answer 5

您可以使用选择器＆＃34; + ＆＃34;

  

HTML

<a id="tooldrop">HOVER ME !</a>
<ul id="dropea">
  <li>ONE</li>
  <li>TWO</li>
</ul

  

CSS

    ul#dropea li{
        background-color: red;padding: 10px;opacity: 0;transition: all 0.3s ease-in-out;
    }
    #tooldrop:hover + ul#dropea li {
      transform: rotate(0) scale(1);
      opacity: 1;
    }

===========================================

JUST ADD＆＃34; +＆＃34;每个新元素

  

HTML

<a id="tooldrop">HOVER ME !</a>
<div class="block"></div>
<ul id="dropea">
  <li>ONE</li>
  <li>TWO</li>
</ul>

  

CSS

   ul#dropea li{
     background-color: red;padding: 10px;opacity: 0;transition: all 0.3s ease-in-out;
    }
    #tooldrop:hover + div.block + ul#dropea li {
      transform: rotate(0) scale(1);
      opacity: 1;
    }

ExteraDex