Q&A
左から右ではなく右から左へ消えているように見えるし、消したくないというのもわかりません。マウスに関係なく出たままにしたいのですか？
前提・実現したいこと
こちらのサイトのようなメガドロップダウンメニューを作っているのですが
マウスオーバーしたらアニメーションで下線が左から右にスライドすることは出来たのですが
下線が左から右に下線が消えてしまいます。
消えないようにするにはどのようなCSSを設定すればいいのでしょうか？
画像の赤枠の通りに
マウスオーバーしたらアニメーションで下線が左から右にスライドすることは出来たのですが
下線が左から右に下線が消えてしまいます。
消えないようにするにはどのようなCSSを設定すればいいのでしょうか？
before画像です。
after画像です。
この画像の通りに実行したいです。
該当のソースコード
私が作ったコードになります。
css
1```ここに言語を入力 2/* header */ 3header { 4 background: rgba(0,0,0,0.5); 5 position: relative; 6} 7 8.header-container { 9 display: flex; 10 justify-content: space-between; 11 align-items: center; 12 padding: 10px 0; 13/* position: relative;*/ 14} 15 16.header-logo a { 17 color: chartreuse; 18 font-size: 40px; 19} 20 21/* navigation(menu) */ 22.nav { 23} 24 25.nav ul { 26 27} 28 29.nav ul li { 30 display: inline-block; 31 padding-left: 70px; 32} 33 34.nav ul li a { 35 position: relative; 36 display: block !important; 37 width: 100%; 38 padding: 16px 0px; 39 text-align: center; 40 color: white; 41} 42 43.nav ul li a::after { 44 position: absolute; 45 left: 0; 46 bottom: -10px; 47 content: ''; 48 width: 100%; 49 height: 4px; 50 background: red; 51 transform: scale(0,1); 52 transform-origin: left top; 53 transition: transform .3s; 54} 55 56.nav ul li a:hover::after { 57 transform: scale(1,1); 58 width: 100%; 59} 60 61.nav ul li .mmd-wrap { 62 63} 64 65.nav ul li .mmd_inner { 66 position: absolute; 67 top: 68px; 68 left: 0; 69 right: 0; 70 width: 100%; 71 padding: 20px 72px; 72 background: #000; 73} 74 75.nav ul li .mmd_inner { 76 display: none; 77} 78 79.nav ul li:hover .mmd_inner { 80 display: block; 81} 82 83.nav ul li:hover .mmd_inner { 84 display: flex; 85 justify-content: space-between; 86 align-items: center; 87} 88
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="keywords" content=""> 6 <meta name="description" content=""> 7 <meta name="viewport" content="width=device-width,initial-scale,viewport-fit=auto"> 8 <meta property="og:site_name" content=""> 9 <meta property="og:title" content=""> 10 <meta property="og:description" content=""> 11 <meta property="og:url" content=""> 12 <meta property="og:type" content=""> 13 <meta property="og:image" content=""> 14 <title></title> 15 <link rel="shortcut icon" href="/favicon.ico"> 16 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 17 <link rel="stylesheet" href="css/reset.css"> 18 <link rel="stylesheet" href="css/style2.css"> 19 </head> 20 <body> 21 <div id="wrapper"> 22 23 <!--//// header ////--> 24 <header> 25 <div class="header-container"> 26 <div class="header-logo"> 27 <h1 class="logo"><a href="">LOGO</a></h1> 28 </div> 29 <div class="nav-toggle"> 30 <div> 31 <span></span> 32 <span></span> 33 <span></span> 34 </div> 35 </div> 36 <nav class="nav"> 37 <ul class="globalnav"> 38 <li><a href="">MENU1</a></li> 39 <li><a href="">MENU2</a> 40 <div class="mmd_wrap"> 41 <div class="mmd_inner"> 42 <div class="image"> 43 <img src="img/gm_corporate.jpg" alt=""> 44 </div> 45 <ul> 46 <li><a href="">top1</a></li> 47 <li><a href="">top2</a></li> 48 <li><a href="">top3</a></li> 49 </ul> 50 </div> 51 </div> 52 </li> 53 <li><a href="">MENU3</a></li> 54 <li><a href="">MENU4</a></li> 55 <li><a href="">MENU5</a></li> 56 </ul> 57 </nav> 58 </div> 59 </header> 60 </div> 61 </body> 62</html>
試したこと
ネットで色々と調べたのですが原因が分かりません。
私が作ったのはホバー時にアンダーラインが左から右にアニメーションになる実装になっており なった時点で説明が難しいのですが左右アンダーラインが残っているにはどのようにcss で設定すればいいのでしょうか？
ホバー時にメガドロップダウンメニューが表示される前に ::after擬似要素でアンダーラインが左から右にアニメーションで表示されるのですが hover::after時にアンダーライン左から右に消えてしまいます。 アンダーラインが残るようにするにはどのようにcssで設定すればいいのでしょうか？
「下線が左から右に下線が消えてしまいます。」この記述がよくわかりません。どのタイミングで消えてしまい、理想はどうなってほしいのかを記載してください。
追加したafter画像はホバー時に左から右にアニメーションになり アンダーラインが消えてしまします。理想はbefore画像のようにアンダーラインが残っている状態にしたいのですがうまくいきません。
コメントのbeforeとafterが逆な気がしますが。 やりたいことは「マウスホバーが外れた後もアンダーラインを残したい」ということで良いのですか？
そのとおりです。マウスホバーが外れた後もアンダーラインを残したいことを実行したいです。
回答2件
0
ベストアンサー
CSSのhoverはマウスカーソルが乗っている間のみ機能します。
そのため、マウスカーソルが外れるとついていたスタイル（下線）は消えてしまいます。
CSSにはマウスカーソルが乗った後に継続させるという機能はないので、
JavaScriptのonmouseoverイベントで実装する必要があります。
実装方法は複数手段ありますので、どんな実装が良いか調べてみてください。
リンク先のサイトではCSSのhoverのみ使用されています。
マウスカーソルが乗った時に下にメニューが出ますが、それも下線が付く項目の一部の扱いなので
そのメニューにマウスカーソルがある間も下線が消えることなく残るようになっています。
投稿2018/11/05 02:45
編集2018/11/05 03:03総合スコア5158
お聞きしたいのですが
https://www.plus1-one.co.jp/
こちらのサイトはjavascriptでmouseover時に実装されるように作られているのでしょうか？
JavaScriptは基本的に生の記述で置いてないので判断できません。
（探すのも手間なのでパッとしか見てないですが。）
私が思いついたのはonmouseoverですが、他にも方法はあるかと思います。
リンク先のサイトの挙動を確認したので回答修正しました。
リンク先のサイトの挙動を確認とを詳しく教えてください。
回答に書いてますが、どこが不明ですか。
いえ、大丈夫です。
0
方向については再現しないのでわかりませんが、リスト内で動かしたいということならliにhoverをつけるべきでしょう。参考にしたサイトもそうなっているはずです。
CSS
1/*.nav ul li a:hover::after {*/ 2.nav ul li:hover a::after { 3
投稿2018/11/05 01:39
総合スコア13749
あなたの回答
tips
プレビュー
