Question

我具有以下html结构

<div id="maindiv" class="cl_maindiv">
    <label>123</label>
    <span class="cl_span_icon"> :-)) </span>
    <div id"icon_content_div" class="cl_icon_content"> more happy faces :-))   </div>                              
</div>

为此，我希望将鼠标悬停在带有“ cl_span_icon”类的跨度上（请注意，我有很多相同的内容，并且我只希望这对它有效，在这个div内，我将悬停在跨度上），将“ cl_showme”类添加到div id =“ icon_content_div”

所以我尝试

.cl_maindiv>.cl_span_icon:hover .cl_showme{
  display:block;
}

正确的方法是什么？

非常感谢。

Answer 1

添加课程 ，很遗憾，使用普通CSS不可能。
为此，您必须使用JavaScript。

但是，如果您不添加类，则可以通过 CSS伪类（例如:hover）来实现。这不会添加类，但是您的示例可以进行一些编辑。

我认为您需要这样的东西：

.cl_maindiv>.cl_span_icon:not(:hover)+.cl_icon_content{
  /*Styles without :hover*/
  display:none;
}
.cl_maindiv>.cl_span_icon:hover+.cl_icon_content{
  /*Styles with :hover*/
  display:block;
}

<div id="maindiv" class="cl_maindiv">
    <label>123</label>
    <span class="cl_span_icon"> :-)) </span>
    <div id="icon_content_div" class="cl_icon_content"> more happy faces :-))</div>                              
</div>

如果将鼠标悬停在另一个类上，则添加一个没有jquery的类

1 个答案: