CSS：奇妙なボックスが表示された後：ホバー

CSS/HTML/PHPで操作しています：背景色を変更するためには：hoverがありますが、ナビゲーションペインにカーソルを置いたとき（.navrightはリスト）には、右上に奇妙な灰色のボックスが表示されます。CSS：奇妙なボックスが表示された後：ホバー

これは常に起こるわけではありませんが、カーソルを要素上でゆっくり動かすと、ボックスが表示されます。要素上でマウスをすばやく動かすと、その要素は表示されません。しかし、一度それが現れたら、それはそこにとどまり、私はこれを解決することができませんでした！

これは私のコードです：

.navright a { 
    display: block; 

    text-align: left; 

    width: 180px; 
    height: 24px; 

    font-size: 15px; 
    font-weight: 500px; 
    font-family: "Helvetica Neue", Helvetica; 
    color: #141414; 

    padding: 3px 0px; 
    margin: 2px 10px; 
    text-decoration: none; 
} 

.navright:hover { 
    background-color: #e0e0e0; 
}

< < >>

出典

2017-08-12 eyeofthetiger

からoverflow: scrollを削除 'ための任意のCSSルールがある場合は、あなたがチェックしまし：親要素のhover'を？または要素の種類によって？ – gespinha

それはその枝のための唯一のものです – eyeofthetiger

私はこれをApache上でローカルに実行しています。私はそれが問題であるとは思わないでしょうが、私の人生ではなぜこれが起きているのか理解できません。 – eyeofthetiger

問題は、あなたが*（ページ上のすべての要素）に割り当てるoverflow: scroll;性質に依存しています。なんらかの理由で、これは<a>要素の外で奇妙な形になっています。本当にわからない理由が、次のように解決策は以下のとおりです。

https://jsfiddle.net/hyk4jtwe/5/

が*セレクタからoverflow: scroll;を削除します。
そうのように、.navbarTop要素上の擬似セレクタとしてclear修正を追加し、メニューはまだその初期サイズを維持することを確実にするために：（あなたはいくつかの異なる方法でclear修正を適用することができます

が、これはあります控えめな方法）

.navbarTop:after{ 
    clear: both; 
    content: ''; 
    display: block; 
}

これが完了すると、あなたがリンクの絶頂を修正するために、それはあなたの問題を解決すべきいくつかのマイナーなサイズ調整を追加する必要があります。

* { 
 
\t box-sizing: border-box; 
 
\t /* Reset the defaults */ 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
#webpage { 
 
\t background-color: #efefef; 
 
} 
 

 
#navmenu { 
 
\t height: 55px; 
 
\t margin-bottom: 20px; 
 
} 
 

 
.navbarTop:after{ 
 
    clear: both; 
 
    content: ''; 
 
    display: block; 
 
} 
 

 
.navbarTop { 
 
\t list-style-type: none; 
 
\t background-color: royalblue; 
 

 
\t min-width: 40em; 
 
} 
 

 
.navtop { 
 
\t min-width: 100px; 
 
\t min-height: 40px; 
 
\t height: 100%; 
 
\t margin-top: 5px 0px; 
 
\t float: left; 
 
\t padding: 5px 0px; 
 
} 
 

 
#buddyTitle, .navtop a { 
 
\t display: inline-block; 
 
\t color: white; 
 

 
\t padding: 10px 40px; 
 

 
\t text-decoration: none; 
 
\t text-align: center; 
 
} 
 

 
#buddyTitle { 
 
\t float: left; 
 
\t min-width: 150px; 
 
\t min-height: 40px; 
 

 
\t font-weight: 580; 
 
\t font-size: 35px; 
 
\t font-family: Garamond; 
 
\t letter-spacing: 0.25rem; 
 
} 
 

 
.navtop a { 
 
\t font-weight: 500; 
 
\t font-size: 20px; 
 
\t font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica; 
 
\t letter-spacing: 0.05rem; 
 
} 
 

 
.navtop:hover { 
 
\t background-color: #314fa7; 
 
\t -webkit-transition: background-color .7s; 
 
    -moz-transition: background-color .7s; 
 
    -o-transition: background-color .7s; 
 
    transition: background-color .7s; 
 
}

\t <body id = "webpage"> 
 
\t \t <!-- Navigation pane on the top with the header --> 
 
\t \t <div id = "navmenu"> 
 
\t \t \t <ul class = "navbarTop"> 
 
\t \t \t \t <li id = "buddyTitle">Title</li> 
 
\t \t \t \t <li class = "navtop"><a href = "example.com">Test1</a></li> 
 
\t \t \t \t <li class = "navtop"><a href = "example.com">Test2</a></li> 
 
     <li class = "navtop"><a href = "example.com">Test3</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
    </body>

出典

2017-08-13 00:16:42 gespinha

問題を完全に修正しました！ありがとうございました。オーバーフローがそのような問題を引き起こす理由を知りたいのですが – eyeofthetiger

時にはこのような問題はレンダリングのバグが軽微である場合があります。我々は決して知らない。しかし、私はこのような未知の問題を防ぐために、できるだけHTMLとCSSの仕様に従うことを強くお勧めします。 '*'セレクタは非常に慎重に使うべきです。しかし、私はあなたの問題を解決してうれしいです！ – gespinha

ありがとうございます（私はまだ学んでいますが、あなたがたぶん教えているかもしれません）！ – eyeofthetiger

*セレクタ

出典

2017-08-13 00:45:51

CSS：奇妙なボックスが表示された後：ホバー

答えて

関連する問題