1

私は現在、個人的なゲーム プロジェクトの小さなランディング ページに取り組んでいます。素敵な link:hover 効果が欲しかったので、:after 要素を使用してリンクの上に trianle を配置していますが、配置が機能していません。

jsfiddleでコードをまとめました。

現在、三角形は絶対位置に配置されており、これは多くのチュートリアルで機能していますが、スパン要素では機能していません。

4

2 に答える 2

0

常に中央にある理由は、linktopbar.xi がすべてのアンカー要素 (div.footer) を保持する包含 div から常に絶対位置を取得するためです。.xi 要素に left:50% を指定しました。これは、position:relative を持つ最初の要素を取得し、その要素 x、y、および幅に基づいて解決することを意味します。

各アンカー要素に xi OR を指定する必要があります。.js を使用して要素の .position() (jQuery 内) を計算し、.xi left 属性値を調整する必要があります。

于 2012-07-14T11:56:45.077 に答える
0

要素に設定position: relativeすることを忘れないでください:<span>

span.linktopbar {
    ...
    position: relative;
}

また、display: inline-blockホバリング時にスクロールバーが表示されないように設定しました。

于 2012-07-14T11:47:49.560 に答える