如果悬停另一个类，则添加一个没有 jquery 的类 [英] add a class without jquery if hover another class

问题描述

我有以下 html 结构

<标签>123</标签><span class="cl_span_icon">:-)) </span><div id"icon_content_div" class="cl_icon_content">更多快乐的脸:-)) </div>

为此，我想要，在使用类cl_span_icon"悬停此跨度时(注意，我有很多相同的内容，而且我只想要，这适用于此，在此 div 中我悬停跨度), 将cl_showme"类添加到 div id="icon_content_div".

所以我试试

.cl_maindiv>.cl_span_icon:hover .cl_showme{显示:块；}

正确的做法是什么?

非常感谢.

解决方案

添加类，不幸的是，使用纯 CSS 是不可能的.
为此，您必须使用 JavaScript.

但是，如果您不添加类，则可以通过CSS 伪类(如:hover)来实现.这不会添加类，但您的示例只需稍作修改即可.

我认为你需要这样的东西:

.cl_maindiv>.cl_span_icon:not(:hover)+.cl_icon_content{/*没有:hover的样式*/显示:无；}.cl_maindiv>.cl_span_icon:hover+.cl_icon_content{/*样式:悬停*/显示:块；}

<标签>123</标签><span class="cl_span_icon">:-)) </span><div id="icon_content_div" class="cl_icon_content">更多快乐的脸:-))

i've the following html structure

<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>

For this i want, on hover THIS span with class "cl_span_icon" (pay attention, i have a lot of same content, and i only want, that this works for this, inside this div i'm hover the span), add the "cl_showme" class to the div id="icon_content_div" .

So i try it with

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

What is the right way to do it?

thanks a lot.

解决方案

Adding a class, unfortunately, impossible with plain CSS.
To do this you must use JavaScript.

But, if you don't add a class, you can do it by CSS pseudo-classes (like :hover). This won't add the class, but your example can work with a little edit.

I think that you'll need something like this:

.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 的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！