1
純粋なCSSを使用すると、次のようなときにメニュー画面が表示されます。ユーザーがクリックすると、メニューのポップアウトが開き、その初期メニューイメージがアクティブになります。しかし、私はスタイリングがアクティブまたはフォーカスのために設定されていても、必要な色を維持していません。メニューのフォーカスまたはアクティブが期待通りに応答しない
カーソルがそのイメージオフとメニュー項目に移動すると、その背景色が意図したカバー滞在していません:ホバー時のように
画像。その画像:
HTMLとCSSのための私のコードは次のとおりです。
#menu {
position: relative;
}
#menu_img:hover,
#menu_img:active,
#menu_img:focus {
background-color: #008272;
cursor: pointer;
}
#menu_items {
position: absolute;
top: 0%;
opacity: 0;
transition: all 0.5s;
display: none;
background-color: #002F33;
color: #ffffff;
height: 600px;
width: 18%;
z-index: 2;
left: 0px;
}
#menu_items > a {
font-size: 18px;
color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
padding-left: 20px;
}
#menu_items > a:hover {
text-decoration: none;
}
#menu_items.menu_items_toggle {
opacity: 1;
top: 100%;
display: inline-block;
}
<div id="menu" style="background-color: #002F33; height:50px;">
<span id="span_img_container" class="navIcon" style="width: 50px;"><img id="menu_img" src="assets/images/icon_hamburger.png"></span>
<div id="menu_items">
<a href="https://www.moneyball.ms/">Moneyball Website</a>
<br>
<a href="https://www.tools.moneyball.ms/">Moneyball Tool</a>
<br>
<a href="https://msit.microsoftstream.com/channel/8a4a7740-855b-4c52-912c-c97fb714a0a6">Moneyball Stream Channel</a>
<br>
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:15px; padding-top: 26px; position: relative; top: 5px; left: -5px;">Moneyball Tool</span>>
</div>
この上の任意のアイデア?とても有難い!
:あなたはこのような何かを試すことができます。私は単純なCSSでそれをやることができるはずです。いいえ? – Mark