javascript - 选择一个元素并将动画应用于子元素

Question

我正在尝试选择一个元素，向其添加悬停，然后让它选择该元素的子元素。因此，在这种情况下，悬停应该选择 div 并将动画应用于嵌套在其中的 p。

我浏览了 w3schools 网站。我认为添加 :only-child 选择器可能会起作用，但似乎不起作用。也许那不是有效的语法。

如果可能的话，我想尽可能保留这个CSS，但也许它需要jquery。有谁知道如何做到这一点？感谢任何输入。

HTML

<section class="secLI">
    <a href="index.html">
      <h3>Home</h3> 
    </a>
    <div id="dropDown1" class="dropHide">
        <p class="dropP">
            This is information about the company.......
        </p>
    </div>
</section>

CSS

#dropDown1:hover:only-child {
        /*****Display P in Drop Down on Hover*****/
            -webkit-animation-name: displayP;
              -webkit-animation-duration: .12s;
              -webkit-animation-delay: 1s;
              -webkit-animation-fill-mode: forwards !important; 
              -moz-animation-name: displayP;
              -moz-animation-duration: .12s;
              -mozt-animation-delay: 1s;
              -moz-animation-fill-mode: forwards !important;    
              -ms-animation-name: displayP;
              -ms-animation-duration: .12s;
              -ms-animation-delay: 1s;
              -ms-animation-fill-mode: forwards !important; 
              -o-animation-name: displayP;
              -o-animation-duration: .12s;
              -o-animation-delay: 1s;
              -o-animation-fill-mode: forwards !important;               
              animation-name: displayP;
              animation-duration: .12s;
              animation-delay: 1s;
              animation-fill-mode: forwards !important;
    }

              /*****Display P in Drop Down*****/
            @-webkit-keyframes displayP {
                  from { opacity: 0; }
                  to { opacity: 1; }
              }

Answer 1

#dropDown1:hover .dropP {

应该可以解决问题。 .dropP 指定具有类 dropP 的元素，当悬停 #dropDown1 时，它是 #dropDown1 的子元素。