1
私はメインメニュー項目の上にマウスを置くと、サブメニューに取り組んでいます。メインメニューの項目からマウスをゆっくりとサブメニューに移動するときに、問題なく同じエフェクトを表示する方法を見つけようとしています。 （あなたはサブメニューが消えるのを見るでしょう）。以下はjsFiddleです。どんな助けでも大歓迎です。DIVとホバー効果の問題
注：私のウェブサイトのデザインにあわせてjsFiddleの表示が若干異なりますが、それは無関係です。
.header {
\t height: auto;
\t width: 70vw;
\t
\t display: inline-block;
\t
\t background-color: #222;
\t \t
\t color: #fff;
\t
\t padding-top: 15px;
\t padding-bottom: 75px;
\t
\t border-top-left-radius: 10px;
\t border-top-right-radius: 10px;
}
.menu {
\t height: auto;
\t width: 100%;
\t
\t top: 0px;
\t
\t text-align: center;
\t
\t display: table;
\t table-layout: fixed;
\t
\t background-color: transparent;
\t
\t border: thin solid transparent;
\t
\t border-spacing: 0px;
\t border-collapse: collapse;
}
.menu-item {
\t font-size: 14px;
\t font-family: poppins;
\t \t
\t color: #9e9e9e;
\t
\t padding-top: 20px;
\t padding-bottom: 20px;
\t
\t height: auto;
\t width: auto;
\t
\t background-color: transparent;
\t
\t display: table-cell;
\t
text-align: center;
\t
\t cursor: pointer;
\t
\t text-decoration: none;
}
.menu-item:hover {
\t color: #fff;
\t background-color: #ff6e00;
}
.menu div {
\t border-right: solid thin #333;
\t border-left: solid thin #333;
}
.menu div:last-child {
\t border-right: none;
}
.menu div:first-child {
\t border-left: none;
}
.sub-menu {
\t height: auto;
\t width: 100%;
\t
\t display: table;
\t table-layout: fixed;
\t
\t border-spacing: 0px;
\t border-collapse: collapse;
}
.sub-menu-item {
\t display: table-cell;
\t
\t height: auto;
\t width: auto;
\t
\t font-size: 14px;
\t font-family: raleway;
\t
\t color: #999;
\t background-color: #333;
\t
\t padding-top: 20px;
\t padding-bottom: 20px;
\t
\t cursor: pointer;
}
.sub-menu-item:hover {
\t color: #fff;
\t background-color: #666;
}
.sub-menu-item-icon {
\t height: auto;
\t width: auto;
\t
\t padding-bottom: 20px;
\t
\t text-align: center;
\t
\t vertical-align: middle;
}<div class="header">
\t
<div class="menu">
\t
\t <div class="menu-item" onMouseOver="document.getElementById('sub-home').style.display = 'table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';">Home</div>
<div class="menu-item" onMouseOver="document.getElementById('sub-pricing').style.display = 'table';" onMouseOut="document.getElementById('sub-pricing').style.display = 'none';">Plans & Pricing</div>
<div class="menu-item">Testimonials</div>
<div class="menu-item">Design Hub</div>
<div class="menu-item">Contact Us</div>
\t
</div>
<div class="sub-menu" id="sub-home" onMouseOver="document.getElementById('sub-home').style.display ='table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';">
\t
\t <div class="sub-menu-item">About Us</div>
<div class="sub-menu-item">Our Mission</div>
</div>
<div class="sub-menu" id="sub-pricing" onMouseOver="document.getElementById('sub-pricing').style.display = 'table';" onMouseOut="document.getElementById('sub-pricing').style.display = 'none';">
\t
\t <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Website Hosting</div>
<div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Email Hosting</div>
<div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Domain Names</div>
<div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Other Services</div>
</div>
</div>https://jsfiddle.net/oqjwvv8m/
を参照してください：（あなたのメニューのだぼっで境界線を削除します）あなたのCSSにこれを追加し、この問題を解決するには
！それは恥ずかしいハハハです。ありがとうございます:) – Jesse
私は、関連するサブメニューに入っているとき、どのようにメインメニュー項目を "ホバー"状態に設定しますか？ – Jesse
サブメニューはメインメニュー項目の子でなければなりません。または、サブメニューのホバーを設定してメニュー項目の変更をトリガーすることができます – GvM