選擇一個元素並將動畫應用到子元素

Question

我試圖選擇一個元素，並將其添加到其中，然後讓它選擇該元素的子元素。所以，在這種情況下，懸停應該選擇div並將動畫應用到其嵌套的內部。

我在w3schools網站上瀏覽過。我想添加：獨生子選擇器可能會起作用，但它似乎並不。也許這不是一個有效的語法。

如果可能，我想保留這個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指定具有class dropP的元素，當＃dropDown1被徘徊時，該元素是＃dropDown1的子元素。

Answer 2

哈弗下面某處首頁看到顯示:) 您需要在您添加前綴爲所有供應商的關鍵幀使其正常工作的文本。

改變你的CSS這樣

.dropP{ 
 
    opacity: 0; 
 
} 
 
#dropDown1:hover .dropP { 
 
    
 
    -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; 
 
    } 
 
} 
 
@-moz-keyframes displayP { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
@-ms-keyframes displayP { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
@-o-keyframes displayP { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes displayP { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
}

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