blocks|key|995084|text|为什么不直接使用CSS呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|995085|.parent:hover+.child,+.parent.hover+.child+{+display:+block;+}|code-block|syntax|javascript|995086|然后为IE6添加JS+(例如，在条件注释中)，它不支持:正确地悬停：|995087|jQuery('.parent').hover(function+()+{
++++jQuery(this).addClass('hover');
},+function+()+{
++++jQuery(this).removeClass('hover');
});|995088|这里有一个简单的例子：Fiddle|offset|length|995089|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/5FLr4/^0|0|0|0|0|B|6|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>Why not just use CSS?</p>

<pre><code>.parent:hover .child, .parent.hover .child { display: block; }
</code></pre>

<p>and then add JS for IE6 (inside a conditional comment for instance) which doesn't support :hover properly:</p>

<pre><code>jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});
</code></pre>

<p>Here's a quick example: <a href="http://jsfiddle.net/5FLr4/" rel="noreferrer">Fiddle</a></p>


blocks|key|780867|text|.parent:hover+>+.child+{
++++/*do+anything+with+this+child*/
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|780868|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>.parent:hover &gt; .child {
    /*do anything with this child*/
}
</code></pre>


blocks|key|780759|text|使用toggleClass()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|780760|$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});|code-block|syntax|javascript|780761|其中color是类。您可以根据自己的喜好设置类的样式，以实现所需的行为。该示例演示了如何在鼠标输入和输出时添加和删除类。|780762|查看工作示例here。|780763|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jaHz8/2/^0|2|D|0|0|2|5|0|6|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>Use <code>toggleClass()</code>.</p>

<pre><code>$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});
</code></pre>

<p>where <code>color</code> is the class. You can style the class as you like to achieve the behavior you want. The example demonstrates how class is added and removed upon mouse in and out.</p>

<h2>Check Working example <a href="http://jsfiddle.net/jaHz8/2/">here</a>.</h2>


blocks|key|780850|text|Stephen's+answer是正确的，但以下是我对他的答案的改编：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|780851|HTML|780852|<div+class="parent">
++++<p>+parent+1+</p>
++++<div+class="child">
++++++++Text+Block+1
++++</div>
</div>

<div+class="parent">
++++<p>+parent+2+</p>
++++<div+class="child">
++++++++Text+Block+2
++++</div>
</div>|code-block|syntax|javascript|780853|CSS|780854|.parent+{+width:+100px;+min-height:+100px;+color:+red;+}
.child+{+width:+50px;+min-height:+20px;+color:+blue;+display:+none;+}
.parent:hover+.child,+.parent.hover+.child+{+display:+block;+}|780855|jQuery|780856|//this+is+only+necessary+for+IE+and+should+be+in+a+conditional+comment

jQuery('.parent').hover(function+()+{
++++jQuery(this).addClass('hover');
},+function+()+{
++++jQuery(this).removeClass('hover');
});|780857|您可以看到这个示例working+over+at+jsFiddle。|780858|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5061940/changing-the-child-elements-css-when-the-parent-is-hovered-with-jquery/5061953#5061953|1|http://jsfiddle.net/Qt9vr/^0|0|G|0|0|0|0|0|0|0|0|9|O|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1B|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]]]

<p><a href="https://stackoverflow.com/questions/5061940/changing-the-child-elements-css-when-the-parent-is-hovered-with-jquery/5061953#5061953">Stephen's answer</a> is correct but here's my adaptation of his answer:</p>

<h3>HTML</h3>

<pre><code>&lt;div class="parent"&gt;
    &lt;p&gt; parent 1 &lt;/p&gt;
    &lt;div class="child"&gt;
        Text Block 1
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="parent"&gt;
    &lt;p&gt; parent 2 &lt;/p&gt;
    &lt;div class="child"&gt;
        Text Block 2
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<h3>CSS</h3>

<pre><code>.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }
</code></pre>

<h3>jQuery</h3>

<pre><code>//this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});
</code></pre>

<p>You can see this example <a href="http://jsfiddle.net/Qt9vr/" rel="nofollow noreferrer">working over at jsFiddle</a>. </p>


blocks|key|995356|text|不知道是否有可怕的理由这样做，但它似乎在我的最新版本的Chrome/Firefox上工作，没有任何明显的性能问题，页面上有相当多的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|995357|*:not(:hover)>.parent-hover-show{
++++display:none;
}|code-block|syntax|javascript|995358|但是通过这种方式，您所需要的只是将parent-hover-show应用于一个元素，其余的就可以处理了，并且您可以保留您想要的任何默认显示类型，而不必总是将其设置为“块”或为每个类型创建多个类。|offset|length|style|CODE|995359|entityMap^0|0|0|H|H|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Not sure if there's terrible reasons to do this or not, but it seems to work with me on the latest version of Chrome/Firefox without any visible performance problems with quite a lot of elements on the page.</p>

<pre><code>*:not(:hover)&gt;.parent-hover-show{
    display:none;
}
</code></pre>

<p>But this way, all you need is to apply <code>parent-hover-show</code> to an element and the rest is taken care of, and you can keep whatever default display type you want without it always being "block" or making multiple classes for each type.</p>


blocks|key|780937|text|要从css更改它，您甚至不需要设置子类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|780938|.parent+>+div:nth-child(1)+{+display:none;+}
.parent:hover+>+div:nth-child(1)+{+display:+block;+}|code-block|syntax|javascript|780939|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To change it from css you dont even need to set the child class</p>

<pre><code>.parent &gt; div:nth-child(1) { display:none; }
.parent:hover &gt; div:nth-child(1) { display: block; }
</code></pre>


blocks|key|781248|text|使用CSS可见性属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|781249|尝试使用css可见性属性来保持div的大小，以便可以将元素悬停：|781250|​|781251|.child+{
++visibility:+hidden;
}
.parent:hover+.child+{
++visibility:+visible;
}|code-block|syntax|javascript|781252|<h3>Hover+below</h3>
<div+class="parent">
++<div+class="child">Text+Block+1</div>
</div>

<div+class="parent">
++<div+class="child">Text+Block+2</div>
</div>|781253|781254|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<h3>Using CSS Visibility property</h3>
Try use the css visibility property to keep with the size div to be possible hover the element:
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.child {
  visibility: hidden;
}
.parent:hover .child {
  visibility: visible;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Hover below&lt;/h3&gt;
&lt;div class="parent"&gt;
  &lt;div class="child"&gt;Text Block 1&lt;/div&gt;
&lt;/div&gt;

&lt;div class="parent"&gt;
  &lt;div class="child"&gt;Text Block 2&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>First of all, I'm assuming this is too complex for CSS3, but if there's a solution in there somewhere, I'd love to go with that instead.</p>

<p>The HTML is pretty straightforward.</p>

<pre><code>&lt;div class="parent"&gt;
    &lt;div class="child"&gt;
        Text Block 1
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="parent"&gt;
    &lt;div class="child"&gt;
        Text Block 2
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The child div is set to display:none; by default, but then changes to display:block; when the mouse is hovered over the parent div. The problem is that this markup appears in several places on my site, and I only want the child to be displayed if the mouse is over it's parent, and not if the mouse is over any of the other parents (they all have the same class name and no IDs).</p>

<p>I've tried using <code>$(this)</code> and <code>.children()</code> to no avail.</p>

<pre><code>$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });
</code></pre>


Changing the child element's CSS when the parent is hovered

jQuery

首先，我假设这对CSS3来说太复杂了，但如果有什么解决方案，我会很乐意去做。HTML非常简单。<div class="parent">    <div class="child">        Text Block 1    </div></div><div class="parent">    <div class="child">        Text Block 2    </div><

问悬停父元素时更改子元素的CSS
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问悬停父元素时更改子元素的CSSEN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问悬停父元素时更改子元素的CSS
EN