通过使用CSS修改父元素来影响子元素。可能吗？ [英] Affecting child elements by modifying the parent by CSS. is it possible?

问题描述

也许这是一个愚蠢的问题，但我相信它将对许多初学者有用。我已经构建了一个代码。我想做的是显示当前隐藏的文本（< p> 标签），只有当实际< a> 被悬停。这是可能没有js？可以通过仅在css / html操作来完成吗？
html代码在这里：

 < div class =promo2> 
< a href =speakers-hire.html> 
< div class =promo2a> 
< p> SPEAKERS< / p> 
< / div> 
< / a> 
 
< a href =decks-hire.html> 
< div class =promo2a> 
< p> CD PLAYERS< / p> 
< / div> 
< / a> 
 
< / div> 
  

和对应于上述html的css：

  .promo2a：hover {
 background：url（../_ images / generic / glass5.png）; 
 display：inline-block; 
  

}

  .promo2a p {
 display：none; 
   

}

当整个div promo2a 被徘徊时，< p> b

任何帮助都非常感谢。

解决方案

尝试

 code> .promo2a：hover> p {display：block;} 
  

或任何适合您的需要

Maybe it's a silly question, but I'm sure it will be useful for many of beginners. I have constructed a code. What I'm trying to do is to display the text (in <p> tags) which is currently hidden, only when the actual <a> is hovered. Is this possible without js? Can it be done by operating on css / html only? the html code is here:

                <div class="promo2">
                    <a href="speakers-hire.html">
                        <div class="promo2a">
                            <p>SPEAKERS</p>
                        </div>
                    </a>

                    <a href="decks-hire.html">
                         <div class="promo2a">
                            <p>CD PLAYERS</p>
                        </div>
                    </a>

                </div> 

and the css which correspond to the above html:

.promo2a:hover{
background:url(../_images/generic/glass5.png);
display:inline-block;

}

.promo2a p{
display:none;

}

So basically I want the text in <p> to be displayed when the whole div promo2a is hovered.

Any help is kindly appreciated. Thank you in advance.

解决方案

Try

.promo2a:hover > p {display:block;}

or whatever suits your needs

这篇关于通过使用CSS修改父元素来影响子元素。可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！