ブートストラップCSSの移行onhover

Question

こんにちは私はdevdojo.com（https://devdojo.com/ebook/laravelsurvivalguide）のonhoverの美しいCSSトランジションドロップダウンメニューを複製しようとしていますが、それを複製することはできません。これは、メインメニューの3つのドットのオンホバーです。多分私は何かを欠いているでしょうか？ありがとう！

マイCSS：

.dropdown-menu-animated { 
    border: 0 none; 
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); 
    display: block; 
    margin-top: 0; 
    opacity: 0; 
    transform: scale3d(0.95, 0.95, 1) translate3d(0px, -15px, 0px); 
    transform-origin: 100% 0 0; 
    transition-delay: 0s, 0s, 0.5s; 
    transition-duration: 0.5s, 0.5s, 0s; 
    transition-property: opacity, transform, visibility; 
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 
    visibility: hidden; 
} 

.dropdown-menu { 
    background-clip: padding-box; 
    background-color: #fff; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-radius: 4px; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); 
    display: none; 
    float: left; 
    font-size: 14px; 
    left: 0; 
    list-style: outside none none; 
    margin: 2px 0 0; 
    min-width: 160px; 
    padding: 5px 0; 
    position: absolute; 
    top: 100%; 
    z-index: 1000; 
} 
.open > .dropdown-menu-animated { 
    visibility: visible; 
    opacity: 1; 
    transition: opacity .5s, -webkit-transform .5s; 
    transition: opacity .5s, transform .5s; 
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 
} 

マイHTML：

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li class="dropdown"> 
      <a class=" dropdown-toggle" href="#_" data-toggle="dropdown"> 
          HOVER ME 
      </a> 
      <ul class="dropdown-menu dropdown-menu-animated" role="menu"> 
       <li> 
        <a href="/points">Sushi Points</a> 
       </li> 
       <li><a href="/points">Two</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

---

おかげ@chiller。

更新され、編集の答え：

JS

$('.dropdown-toggle').hover(function() { 
    $(this).parent().addClass("open"); 
}); 

$('.dropdown').mouseleave(function() { 
    $(this).removeClass("open"); 
}); 

CSS

.dropdown-menu li a { 
    color: white; 
} 
.dropdown-menu-animated { 
    border: 0 none; 
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); 
    display: block; 
    margin-top: 0; 
    opacity: 0; 
    transform: scale3d(0.95, 0.95, 1) translate3d(0px, -15px, 0px); 
    transform-origin: 100% 0 0; 
    transition-delay: 0s, 0s, 0.5s; 
    transition-duration: 0.5s, 0.5s, 0s; 
    transition-property: opacity, transform, visibility; 
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 
    visibility: hidden; 
} 
.dropdown-menu { 
    background-clip: padding-box; 
    background-color: #fff; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-radius: 4px; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); 
    /*display: none;*/ 
    float: left; 
    font-size: 14px; 
    left: 0; 
    list-style: outside none none; 
    margin: 2px 0 0; 
    min-width: 160px; 
    padding: 5px 0; 
    position: absolute; 
    top: 100%; 
    z-index: 1000; 
} 
.open > .dropdown-menu-animated { 
    visibility: visible; 
    opacity: 1; 
    transition: opacity .5s, -webkit-transform .5s; 
    transition: opacity .5s, transform .5s; 
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 
} 

HTML

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" href="#_" data-toggle="dropdown"> 
          HOVER ME 
      </a> 
      <ul class="dropdown-menu dropdown-menu-animated" role="menu" style="color:white;background:black;"> 
       <li><a href="#">Bulanching</a></li> 
       <li><a href="#">Kuya Matmat</a></li> 
       <li><a href="#">Baby</a></li> 
       <li><a href="#">Wedding</a></li> 
       <li><a href="#">Excited</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

は、この実際にJavaScriptで行われ、あなたがしなければならないすべてはあなたのスクリプトの中で、このjqueryのコードを追加している

$('.dropdown-toggle').hover(function() { 
    $(this).parent().addClass("open"); 
}); 

$('.dropdown').mouseleave(function() { 
    $(this).removeClass("open"); 
}); 

と表示を削除する必要があります。アニメーションが

see your example here

を動作させるためのクラス.dropdownメニューから、あなたはまた、それだけでこのコードを追加することにより、CSSで動作させることができます。

.dropdown:hover>.dropdown-menu-animated{ 

    visibility: visible; 
    opacity: 1; 
    transition: opacity .5s, -webkit-transform .5s; 
    transition: opacity .5s, transform .5s; 
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); 
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 

} 

See your example with CSS only

Answer 2

次のスニペットは、:hover外観のためにあなたのスタイリングの問題を解決します。 .dropdown .dropdown-menu-animatedルールであなたのトランジション効果を追加し、そこにあなたが行く;）

.dropdown { 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
.dropdown .dropdown-menu-animated { 
 
    border: 0 none; 
 
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); 
 
    margin-top: 20px; 
 
    transform: scale3d(0.95, 0.95, 1) translate3d(0px, -15px, 0px); 
 
    transform-origin: 100% 0 0; 
 
    transition-delay: 0s, 0s, 0.5s; 
 
    transition-duration: 0.5s, 0.5s, 0s; 
 
    transition-property: opacity, transform, visibility; 
 
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 
 
    visibility: hidden; 
 
} 
 

 
.dropdown:hover .dropdown-menu-animated { 
 
    visibility: visible; 
 
}

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right"> 
 
    <ul class="nav navbar-nav navbar-left"> 
 
     <li class="dropdown"> 
 
      HOVER ME 
 

 
      <ul class="dropdown-menu-animated" role="menu"> 
 
       <li> 
 
        <a href="/points">Sushi Points</a> 
 
       </li> 
 
       <li><a href="/points">Two</a></li> 
 
      </ul>    
 
     </li> 
 
    </ul> 
 
</div>