アコーディオン 親要素間ホバー
現在、次のHTML、CSSでひとつ開ければひとつ閉じるアコーディオンを実装しています。
HTML
<ul class="menu">
<li>
<a href="#">メニュー1</a>
<ul>
<li><a href="#">サブメニュー1</a></li>
<li><a href="#">サブメニュー2</a></li>
<li><a href="#">サブメニュー3</a></li>
</ul>
</li>
<li>
<a href="#">メニュー2</a>
<ul>
<li><a href="#">サブメニュー1</a></li>
<li><a href="#">サブメニュー2</a></li>
<li><a href="#">サブメニュー3</a></li>
</ul>
</li>
</ul>
CSS
.menu {
width: 100%;
margin: 0;
padding: 0;
}
.menu li {
list-style: none;
}
.menu li a {
display: table;
margin-top:1px;
padding: 10px 10px;
width: 100%;
font-weight: bold; /* 文字を太く */
text-align: center; /* 文字を中央に */
box-shadow: 5px 5px 5px #aaa; /* 影を付ける */
background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */
text-decoration: none;
vertical-align: middle;
color: #ffffff; /* 文字色 */
overflow: hidden;
transition:all .5s ease-out;
}
.menu > li:first-child a {
margin-top: 0;
}
.menu li a:hover {
background: #ff8c04;
transition:all .5s ease-out;
}
.menu li ul {
margin: 0;
padding: 0;
}
.menu li li a {
display: block;
margin-top: 0;
padding: 0 10px;
height: 0;
background: #ffccff;
color: #000000;
transition:all .5s ease-out;
}
.menu > li > ul > li {
margin: 0 !important;
}
.menu > li:hover li a {
display: table;
margin-top: 1px;
padding: 10px;
width: 100%;
height: 1em;
transition:all .5s ease-out;
}
.menu > li:hover li a:hover {
background: #ffb8b3;
transition:all .5s ease-out;
}
親要素のホバーを一度離れて、次の親要素をホバーすると問題ないのですが、上から下へ親要素を連続してホバーすると子要素の閉じる時間もあってか、うまく機能しません。
機能しないというのは、子要素が閉じるため次の親要素をホバーしても次の親要素が上へあがっていくので次の親要素のホバー状態が離れてしまいます。
子要素の数が少なければ何とか大丈夫かな?という感じです。
下から上へ親要素を連続してホバーすると子要素の閉じることには関係ないからか、機能しています。
ひとつ開ければ閉じずに開けたままにしておくしかないのでしょうか?
解決策のわかる方がおられたら教えていただけないでしょうか。
お礼
回答ありがとうございます。 このタブレット用に、スタイラスも、キーボードも、マウスも持っています。 そちらのほうが使いやすいのも分かっていますが、持ち歩きしたくない時も多いのです。
補足
タッチパネルにホバー機能のあるタブレットも販売されています。 私のタブレットでは、アクティブスタイラスペン以外はホバーに対応していないので、ということです。