ドロップダウンメニューを作成しましたが、正しく動作しません。フィドルやコードを参照してください:https://jsfiddle.net/9u6fc7wp/jQueryセレクタがドロップダウンメニューで正常に動作しない
$(document).ready(function() {
$(function() {
$(".links>li>a:not(.sub-menu a)").mouseenter(function() {
$(".sub-menu-bg").addClass("menu-bg-up");
setTimeout(function() {
$(".sub-menu").fadeIn();
}, 700);
});
$(".sub-menu-bg").mouseleave(function() {
$(".sub-menu").fadeOut();
setTimeout(function() {
$(".sub-menu-bg").removeClass("menu-bg-up");
}, 500);
});
}());
});
#wrapper {
height: 300px;
}
footer {
background: white;
color: #8a8a8a;
font-family: TWcenMTregular;
font-size: 1em;
text-transform: uppercase;
padding: 1vh 0;
position: relative;
z-index: 9100;
width: 100%;
}
footer .links {
text-align: center;
list-style: none;
}
footer .links>li {
float: left;
width: 24%;
position: relative;
}
footer .links li::after {
content: ' | ';
float: right;
}
footer .links li:last-child::after {
content: '';
}
footer .links li a {
color: #8a8a8a;
}
footer .links li:hover > a {
color: #9ebe2d;
}
footer .links li:hover .sub-menu li:first-child a {
color: #9ebe2d;
}
footer .sub-menu {
position: absolute;
bottom: 100%;
left: initial;
padding: 0px 0;
margin: 0!important;
font-family: TWcenMTregular;
font-size: 1em;
width: 100%;
height: 150px;
display: none;
}
footer .sub-menu li {
text-align: center;
}
footer .sub-menu li:first-child {
font-family: prismRegular;
padding: 0 0 10px 0;
}
footer .sub-menu li::after {
content: '';
margin: 0;
}
footer .sub-menu li a {
color: #8a8a8a;
}
footer .sub-menu li a:hover {
color: #9ebe2d;
}
footer .sub-menu-bg {
background: rgba(255, 255, 255, 0.8);
position: absolute;
bottom: 100%;
left: initial;
z-index: -5;
width: 100%;
display: block;
transition: 0.7s;
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-o-transition: 0.7s;
-ms-transition: 0.7s;
height: 0;
}
.menu-bg-up {
height: 165px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer>
<ul class="links">
<li><a href="#">link1</a>
<ul class="sub-menu">
<li><a href="#">link1</a>
</li>
<li><a href="#">link2</a>
</li>
<li><a href="#">link3</a>
</li>
<li><a href="#">link4</a>
</li>
</ul>
</li>
<li><a href="#">link2</a>
<ul class="sub-menu">
<li><a href="#">link1</a>
</li>
<li><a href="#">link2</a>
</li>
<li><a href="#">link3</a>
</li>
<li><a href="#">link4</a>
</li>
</ul>
</li>
<li><a href="#">link3</a>
</li>
<li><a href="#">link4</a>
</li>
</ul>
<div class="sub-menu-bg"></div>
</footer>
あなたはゆっくりとマウスを移動すると、それが正常に動作します。サブメニューのリンクを後で表示させるタイムアウト機能を使用しました。カーソルをリンクの1つに移動し、すぐにリンクが表示される空の場所に移動した場合。カーソルがリンクと接触すると、ドロップダウンメニューが消えます。カーソルがフッターから離れると消えます。私にとっては、セレクタが正しく動作していないようだが、問題を解決するはずだ。私はマウスの最初の部分に子供がいるだけです.links>li
これはCSSだけで行うことができる場合はどうすればいいか教えてください。私はできる限りのことをしました。私は問題を明確に説明し、自由に質問することを願っています。
ありがとうございます。
ねえ、反応のために申し訳ありません...例が正常に動作してよさそうだが、私は背景を参照してくださいいけないとアニメーションが同じではありません。 – FFB