質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

460閲覧

CSSのhover処理でボタンがうまく動かない

aikawa

総合スコア10

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/04/07 20:08

編集2022/01/12 10:55

前提・実現したいこと

Webサイトを初めて作成しております。 初心者です。。。 簡単な質問でしたら申し訳ございません。 HTMLとCSSを使用し、 ボタンをfover処理でカーソルが合うときに動いてるように見せたいです。 ボタンを縦に6つ並べ、またそれぞれ動きは同じですが、 色を変えるためにそれぞれ色違うclassで設定を行っています。

発生している問題・エラーメッセージ

表示はできているのですが、 正常に動作できているのは、1番上のボタンのみで 他の5つのボタンは、画面のサイズを小したら、動きがでる? ようになっており、画面サイズが100%の場合は、1番目と2番目のボタンのみしか動作しません。。。 (2番目のボタンも120%まで画面サイズを上げると動作しません。)

該当のソースコード

html

1 <div class="setting_div"> 2 <a href="#"><q class="Linkbutton aaa">aaaaaa</q></a> 3 <a href="#"><q class="Linkbutton bbb">bbbbbb</q></a> 4 <a href="#"><q class="Linkbutton ccc">cccccc</q></a> 5 <a href="#"><q class="Linkbutton ddd">dddddd</q></a> 6 <a href="#"><q class="Linkbutton eee">eeeeee</q></a> 7 <a href="#"><q class="Linkbutton fff">ffffff</q></a> 8 </div>

css

1.setting_div{ 2 float: left; 3 height: auto; 4 width: 30%; 5 margin: 10px; 6} 7 8.setting_div a{ 9 position: relative; 10 color: rgb(0, 0, 0); 11} 12 13.setting_div .Linkbutton { 14 display: flex; 15 align-items: center; 16 justify-content: center; 17 position: relative; 18 margin: 20px auto; 19 width: 250px; 20 height: 100px; 21 background: rgb(255, 255, 255,0.5); 22 border-radius: 75px; 23 font-family: 'Montserrat', sans-serif; 24 font-size: 20px; 25 font-weight: lighter; 26 letter-spacing: 2px; 27 transition: 1s box-shadow; 28 color: black; 29} 30.setting_div .Linkbutton:hover { 31 box-shadow: 0 5px 35px 0px rgba(0,0,0,.1); 32} 33.setting_div .Linkbutton:hover:before, .Linkbutton:hover:after { 34 display: block; 35 content: ''; 36 position: absolute; 37 width: 250px; 38 height: 100px; 39 border-radius: 75px; 40 z-index: -1; 41 animation: 1s clockwise infinite; 42} 43.setting_div .Linkbutton:hover:after { 44 animation: 2s counterclockwise infinite; 45} 46 47/* aaa */ 48.setting_div .aaa:hover:before, .aaa:hover:after {background: rgb(255, 255, 255);} 49.setting_div .aaa:hover:after {background: rgb(0, 0, 0);} 50 51/* bbb */ 52.setting_div .bbb:hover:before, .bbb:hover:after {background: rgb(253, 143, 216);} 53.setting_div .bbb:hover:after {background: rgb(0, 0, 0);} 54 55/* ccc */ 56.setting_div .ccc:hover:before, .ccc:hover:after {background: rgb(167, 25, 250);} 57.setting_div .ccc:hover:after {background: rgb(0, 0, 0);} 58 59/* ddd */ 60.setting_div .ddd:hover:before, .ddd:hover:after {background: rgb(223, 143, 69);} 61.setting_div .ddd:hover:after {background: rgb(0, 0, 0);} 62 63/* eee */ 64.setting_div .eee:hover:before, .eee:hover:after {background: rgb(237, 248, 79);} 65.setting_div .eee:hover:after {background: rgb(0, 0, 0);} 66 67/* fff */ 68.setting_div .fff:hover:before, .fff:hover:after {background: rgb(128, 250, 209);} 69.setting_div .fff:hover:after {background: rgb(255, 255, 255);} 70 71 72@keyframes clockwise { 73 0% { 74 top: -5px; 75 left: 0; 76 } 77 12% { 78 top: -2px; 79 left: 2px; 80 } 81 25% { 82 top: 0; 83 left: 5px; 84 } 85 37% { 86 top: 2px; 87 left: 2px; 88 } 89 50% { 90 top: 5px; 91 left: 0; 92 } 93 62% { 94 top: 2px; 95 left: -2px; 96 } 97 75% { 98 top: 0; 99 left: -5px; 100 } 101 87% { 102 top: -2px; 103 left: -2px; 104 } 105 100% { 106 top: -5px; 107 left: 0; 108 } 109} 110@keyframes counterclockwise { 111 0% { 112 top: -5px; 113 right: 0; 114 } 115 12% { 116 top: -2px; 117 right: 2px; 118 } 119 25% { 120 top: 0; 121 right: 5px; 122 } 123 37% { 124 top: 2px; 125 right: 2px; 126 } 127 50% { 128 top: 5px; 129 right: 0; 130 } 131 62% { 132 top: 2px; 133 right: -2px; 134 } 135 75% { 136 top: 0; 137 right: -5px; 138 } 139 87% { 140 top: -2px; 141 right: -2px; 142 } 143 100% { 144 top: -5px; 145 right: 0; 146 } 147}

試したこと

z-indexが関係ありそうでしたので、
いろいろと設定してみたのですがうまくいきませんでした。

知識が他にありませんので、
ご助力くださるとうれしいです。。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/04/07 21:23

fover→hoverでは? あと中々のコード量なので、全体見て考えるよりも一気に削って問題箇所を特定していった方が良いです。
aikawa

2019/04/08 04:56

回答ありがとうごあざいます。 すいません、まちがえておりました、、、 コメントアウトでの問題個所の特定やってみます!
m.ts10806

2019/04/08 05:36

質問は編集できますので誤字や指摘があれば適宜ご対応いただければと
guest

回答2

0

とりあえず共有部分を一括で処理できるようclassを調整してください

HTML

1<a href="#"><q class="Linkbutton aaa">AAAAA</q></a> 2<a href="#"><q class="Linkbutton bbb">BBBBB</q></a> 3<a href="#"><q class="Linkbutton ccc">CCCCC</q></a> 4<a href="#"><q class="Linkbutton ddd">DDDDD</q></a> 5<a href="#"><q class="Linkbutton eee">EEEEE</q></a> 6<a href="#"><q class="Linkbutton fff">FFFFF</q></a>
  • .Linkbuttonに対してcssを指定する
  • .Linkbutton.aaaに対して以下略

投稿2019/04/08 01:17

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aikawa

2019/04/08 04:55

回答ありがとうございます。 そうですね、とりあえず共有部分の一括処理の調整やってみます。 長くて同じ内容を何度もしているのにちょっと不格好な感じしてましたので、やってみます。 アドバイスありがとうございます。
guest

0

イメージ説明

ん~。どのボタンもホバーするとすごいくるくる回ってくれたので
現象の再現はできませんでした。

キャッシュクリアとかは既に試してますよね?
F12を押してデベロッパーツールを開く→更新ボタン右クリック→キャッシュのクリアとハードの再読込

使ってるブラウザとかのせてみるといいかもしれませんね~。
動作確認したのはChromeです。


CSSをまとめたもの

CSS

1a{ 2 position: relative; 3 color: rgb(0, 0, 0); 4} 5 6.Linkbutton { 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 position: relative; 11 margin: 20px auto; 12 width: 250px; 13 height: 100px; 14 background: rgb(255, 255, 255,0.5); 15 border-radius: 75px; 16 font-family: 'Montserrat', sans-serif; 17 font-size: 20px; 18 font-weight: lighter; 19 letter-spacing: 2px; 20 transition: 1s box-shadow; 21 color: black; 22} 23.Linkbutton:hover { 24 box-shadow: 0 5px 35px 0px rgba(0,0,0,.1); 25} 26.Linkbutton:hover:before, .Linkbutton:hover:after { 27 display: block; 28 content: ''; 29 position: absolute; 30 width: 250px; 31 height: 100px; 32 background: rgb(255, 255, 255); 33 border-radius: 75px; 34 z-index: -1; 35 animation: 1s clockwise infinite; 36} 37.Linkbutton:hover:after { 38 background: rgb(0, 0, 0); 39 animation: 2s counterclockwise infinite; 40} 41.aaa:hover:before, 42.aaa:hover:after { 43 background: rgb(255, 255, 255); 44} 45 46.bbb:hover:before, 47.bbb:hover:after { 48 background: rgb(253, 143, 216); 49} 50 51.ccc:hover:before, 52.ccc:hover:after { 53 background: rgb(167, 25, 250); 54} 55 56.ddd:hover:before, 57.ddd:hover:after { 58 background: rgb(223, 143, 69); 59} 60 61.eee:hover:before, 62.eee:hover:after { 63 background: rgb(237, 248, 79); 64} 65 66.fff:hover:before, 67.fff:hover:after { 68 background: rgb(128, 250, 209); 69}

HTML

HTML

1  <a href="#"><q class="Linkbutton aaa">AAAAA</q></a> 2 <a href="#"><q class="Linkbutton bbb">BBBBB</q></a> 3 <a href="#"><q class="Linkbutton ccc">CCCCC</q></a> 4 <a href="#"><q class="Linkbutton ddd">DDDDD</q></a> 5 <a href="#"><q class="Linkbutton eee">EEEEE</q></a> 6 <a href="#"><q class="Linkbutton fff">FFFFF</q></a>

現象の解決には至ってませんけど、とりあえずCSSまとめてわかりやすくするとこんなかんじだよーとだけ。

before afterの背景色以外は同じスタイルしか適用していないようだったので
全部まとめるといいかと思います。
チェックする箇所が少なくなる分、原因究明のために調査する箇所もへるので。

投稿2019/04/08 00:48

編集2019/04/08 05:26
azuapricot

総合スコア2341

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aikawa

2019/04/08 04:53

ご回答ありがとうございます。 とりあえずですが、chromeでの動作を確認しております。 だとすると、ほかの処理が問題なのですかね。。。 このボタンはdivの中に入ってるボタン群ですので、divの定義が間違っているのかもしれませんね。。。 そこらへんをもう一度みなおしてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問