私は、ホバー上のBootstrapドロップダウンメニューで遷移がフェードアウトするようにしようとしています。
私の試み
.dropdown-menu {
display: block;
opacity: 0;
-moz-transition: all 1000ms ease;
-webkit-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.sidebar-nav li:hover .dropdown-menu {
display: block;
opacity: 1;
}
これは動作しませんでしたが、1000ms遅らせましたが、移行を追加しませんでした。私もjQueryで試したことがありますが、運がまったくありません。
ここではコードを使っています - ドロップダウンメニューは、メニューの最初のリンク「Arla nu」にあります。
回答:
回答№1は1.dropdown .dropdown-menu{
display: block;
opacity: 0;
-moz-transition: all 1000ms ease;
-webkit-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
}
js関数を追加する
$(function(){
var $menu = $(".dropdown-menu");
$(".dropdown-toggle").hover(
function() {
$menu.css("opacity",1);
},
function() {
$menu.css("opacity",0);
});
})();
JSfiddleで答えを更新する
更新
フィドルをチェック http://jsfiddle.net/pjej7o2m/296/
回答№2の場合は0
あなたは、何を変えようとしているのかを断ち切ったようです。
.dropdown-menu {
-webkit-transition: opacity 1000ms ease;
-moz-transition: opacity 1000ms ease;
-o-transition: opacity 1000ms ease;
transition: opacity 1000ms ease;
opacity: 0;
}
.sidebar-nav li:hover .dropdown-menu {
opacity: 1;
}