1

可能な限り最小のフットプリントでこのマウスオーバー効果を達成しようとしています。矢印 (.png) を表示できません。高さで切れてしまい、高さを表示する方法がわかりません。誰かが私を助けてくれることを期待して、これまでにいくつかの失敗した方法を試しました。

私が行ったことは、ボックスのアンカーのスタイルを設定し、小さな矢印をボックスの下に配置しようとすることです。アンカーのボックスの外側に矢印が表示されず、途切れます。矢印を LI の一部にしようとしましたが、うまくいきましたが、アンカーは 30px (青いボックスの高さ) で、LI は 40px (ボックス + 矢印の高さ 10px) である必要があるため、矢印が表示されます。ボックスではなく、その 10 ピクセルの領域にマウスを置いた場合。

現在、このようになっています。

これが私のcssです：

#navlist {
float:right;
}
#navlist li {
line-height:40px;
display:inline;
list-style-type: none;
margin-right: 20px;
}
#navlist li:hover {
background:url(../img/navArrow.png) no-repeat center;
background-position:50% 30px;
}
#navlist li a {
height:30px;
padding:3px 5px 3px 5px;
color:#26627f;

}
#navlist li a:hover {
background:#035173;
border-radius:3px;
color:#fff;
}

ここにhtmlがあります：

<ul id="navlist">
    <li><a href="#">Get a Quote</a></li>
    <li><a href="#">Learn about Life Insurance</a></li>
    <li><a href="#">Our Company</a></li>
    <li><a href="#">Get Help</a></li>
</ul>
4

1 に答える 1

5

以下を CSS に追加するだけです。

#navlist li:hover a::after,
#navlist li a:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -1em;
    border: 1em solid transparent;
    border-top-color: #035173;
}​

JS フィドルのデモ。

もちろん、これには、CSS で生成されたコンテンツと疑似要素を実装するブラウザーがユーザーに必要です。

以下のコメントで、OPからのコメントに応じて編集されました。

そこからどのように形を作っているのかよくわかりませんが、説明していただけますか? できます。矢印を小さくする方法はありますか?また、ボックス シャドウ効果を適用できますか?

これが機能するのは、要素の境界が 45° で交わり、要素 (または、この場合は疑似要素) の中心に向かって「指す」三角形を生成する要素にheight/がないためです。width4 つの境界線がすべて表示されている場合は、正方形になります。上下が見える場合は、三角形の「砂時計」などになります。

三角形を小さくするには、border-width に小さい単位を割り当てるだけです (上記の例では、borders が に設定されていますが、ブラウザが実装できる他のサイズと測定単位に1em変更するだけです)。5px

疑似要素を水平軸の中央に配置するには、負の margin-left (宣言の-1emthe margin) を the に等しくする必要がありますが、好みに合わせて調整できます。border-width

box-shadow三角形を作成するには 4 つの境界線すべてを割り当てる必要があるため、a を追加するのは困難です。これbox-shadowは、要素の「表示」部分だけでなく、要素全体の長方形になります。別の疑似要素 (この場合は ) を使用しても問題ない場合はエミュレートできます::beforeが、通常の本物の 'あいまいさ' はありませんがbox-shadow、デモとして、上記の CSS をコピーするだけで修正できます。::afterto (後で宣言された要素は以前に宣言された要素の上にあるため、要素がの宣言の前にある::beforeことを確認してください)。余白とプロパティを調整すると、問題ないように見えるはずです。::before::afterborder-top-color

#navlist li:hover a::before,
#navlist li a:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -0.7em;
    border: 1em solid transparent;
    border-top-color: #ccc;
}

#navlist li:hover a::after,
#navlist li a:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -1em;
    border: 1em solid transparent;
    border-top-color: #035173;
}​

JS フィドルのデモ。

于 2012-05-21T16:50:35.630 に答える