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的子元素。

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>

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

2 个答案: