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

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

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

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

Q&A

解決済

1回答

330閲覧

【CSS】疑似クラスの:hoverの使い方について

kentasuzuki_

総合スコア28

CSS

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

1グッド

0クリップ

投稿2019/06/22 15:47

編集2019/06/23 01:42

念のために全文を記載しております。
見づらいコードで申し訳ありませんが、アドバイスをいただければと思っております。
画像を見ていただければ、ご理解いただけるかと思いますが、
疑似クラスの:hoverを利用して「ホストをはじめる」というボタンにマウスを合わせると、
アンダーラインが表示されるようにしたいです。

しかし、なぜか「ホストをはじめる」ボタンが「ログイン」ボタンまで移動してしまうのです。
原因を教えていただければ幸いです。
※補足ですが、JavaScript文が入っていますが、これはBootstrapというツールを利用しているからです。

【全体画像】
イメージ説明

【理想のイメージ画像】
イメージ説明

【実際の失敗画像】
イメージ説明

<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <title>現地の人から借りる家、体験&スポット-Airbnb</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="icon" href="image/image1.png">   <!-- <link href="../Sublime3/css/bootstrap.min.css" rel="stylesheet" type="text/css"> --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="mokuji"> <img src="image/image1.png" width="60px" height="48px" alt="目次"> </div> <div class="search-bigbox"> <div class="search-box"> <input id="text-searchbox" type="text" name="search" value="探す" size="40px" > <div class="search"> <img src="image/image2.png" width="18px" height="18px" alt="探す"> </div> </div> </div> <div class="boxbutton"> <button type="button" name="ホスト" class="host1"> <p>ホストをはじめる</p> </button> <button type="button" name="ヘルプ" class="help2"> <p>ヘルプ</p> </button> <button type="button" name="登録" class="regist3"> <p>登録する</p> </button> <button type="button"name="ログイン" class="login4"> <p>ログイン</p> </button> </div> <!--画像挿入--> <div class="trip"> <img src="image/image4.jpg" width="1920px" height="680px" alt="旅行"> <div class="tripgift"> <p id="tp"><strong>旅を贈ろう。</strong></p> Airbnbギフトカードで、世界を身近に<br><br> <input id="submit_button" type="submit" value="ギフトカード登録"> </div> </div> <br><br> <p class="p1" style="width:100px; height:100px; font-size:16px; font-weight:bold;">いつも完璧な贈りもの</p> <div class="mail"> <img src="image/image5.png" width="100px" height="100px" alt="時計">     <p>簡単に使える</p> <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p><br> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="../Sublime3/js/bootstrap.min.js"></script> </body> </html>
.mokuji{ position:absolute; top:20px; left:10px; } .search{ position:absolute; top:15px; left:10px; } input#text-searchbox{ position:absolute; top:15px; left:45px; font-size:16px; font-weight:bold; color:gray; background-color:transparent; border:0px; } .search-bigbox{ position:relative; top:-15px; left: 80px; width:350px; height:48px; background-color:rgba(0,0,0,0); box-shadow: rgba(0,0,0,0.1) 0px 2px 4px; border-width:1px; border-style: solid; border-color: rgb(235,235,235); border-image: initial; border-radius: 4px; } .boxbutton{ position:relative; display:flex; justify-content:flex-end; top:-90px; } .host1{ position: relative; display:inline-block; width:150px; height:50px; font-size:14px; font-weight:bold; background-color:transparent; border:0px; } .host1:hover{ position: absolute; border-top:0; border-bottom:2px solid; border-left:0; border-right:0; border-bottom-color:gray; } .help2{ position: relative; display:inline-block; width:120px; height:50px; font-size:14px; font-weight:bold; background-color:transparent; border:0px; } .help2:hover{ position: absolute; border-top:0; border-bottom:2px solid; border-left:0; border-right:0; border-bottom-color:gray; } .regist3{ position: relative; display:inline-block; width:120px; height:50px; font-size:14px; font-weight:bold; background-color:transparent; border:0px; } .regist3:hover{ position: absolute; border-top:0; border-bottom:2px solid; border-left:0; border-right:0; border-bottom-color:gray; } .login4{ position: relative; display:inline-block; width:120px; height:50px; font-size:14px; font-weight:bold; background-color:transparent; border:0px; } .login4:hover{ position: absolute; border-top:0; border-bottom:2px solid; border-left:0; border-right:0; border-bottom-color:gray; }
dotnetuseryamag👍を押しています

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

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

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

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

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

miyabi_takatsuk

2019/06/22 15:54

コードはコードブロックで記載ください。 質問編集画面の、<code>ボタンにて、コードブロック用の文字列が挿入されますので、 コードはその中に記載ください。 質問本文は修正できます。
m.ts10806

2019/06/23 01:14

↑コードブロック出現させてから移すとたいていミスるので(特に行頭・文末)「コードを選択して<code>ボタン押下」が間違いが少ないです。 あと質問者さん。 コードブロックはファイル毎にわけてくださいね。
kentasuzuki_

2019/06/23 01:43

失礼いたしました。 修正いたしました。
guest

回答1

0

ベストアンサー

hover時にpositionをrelativeからabsoluteにしてしまっているからと思われます。
全てのhoverで与えているclassでposition: absolute;が付いているので、以下のように削除してみてください!

.host1:hover{ border-top:0; border-bottom:2px solid; border-left:0; border-right:0; border-bottom-color:gray; }
.help2:hover{ border-top:0; border-bottom:2px solid; border-left:0; border-right:0; border-bottom-color:gray; }

css

1.regist3:hover{ 2border-top:0; 3border-bottom:2px solid; 4border-left:0; 5border-right:0; 6border-bottom-color:gray; 7}

css

1.login4:hover{ 2border-top:0; 3border-bottom:2px solid; 4border-left:0; 5border-right:0; 6border-bottom-color:gray; 7}

投稿2019/06/23 01:58

hatsu

総合スコア1809

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

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

kentasuzuki_

2019/06/23 15:51

ご返信遅くなりまして申し訳ございません。 ありがとうございます。 試してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問