0

ホバー後にdiv幅を維持する方法を教えてください。

これはHTMLコードです

<div>
<a href="/kcms1/The-Plant/Refining.aspx" style="white-space:nowrap; position:relative;"> Refining</a>
<a href="/kcms1/The-Plant/Products.aspx" style="white-space:nowrap; position:relative;"> Products</a>
<a href="/kcms1/The-Plant/Process.aspx" style="white-space:nowrap; position:relative;"> Process</a>
<a href="/kcms1/The-Plant/Quality-Assurance.aspx" style="white-space:nowrap; position:relative;"> Quality Assurance</a>
<a href="/kcms1/The-Plant/Safety.aspx" style="white-space:nowrap; position:relative;"> Safety</a>
</div>

========

これは私のメイン メニューであり、幅は固定されていません。(品質保証) メイン div にマウスを合わせると、幅が約 2 ピクセル増加します。

ホバーを太字にしたい。

私は文字間隔を使用していますが、良くありません:(

ここで私の問題を見ることができます ここに画像の説明を入力

4

3 に答える 3

1

現在、メニューの幅は最も広い要素によって決定されます。

「サウダイゼーションとトレーニング」は現在最も幅の広い要素です。そのため、太字の場合、余分な幅はメニューの幅を拡張することで調整されます。これは、太字のテキストが標準テキストよりも幅が広いためです。

メニューの幅を固定できない理由はありますか?

メニューの幅を固定できない場合は、ホバー時に選択した要素を強調表示する別の方法を選択できます (下線が一般的な選択です)。

ここで関連する議論を参照してください。

カーソルを置いて太字にするとインライン要素が移動する

于 2012-08-20T10:18:12.360 に答える
0

次のように div スタイルのオーバーフローを設定してみてください。

オーバーフロー: 非表示;

そう：

<div style="overflow:hidden;width:250px;height:200px;">
    content here

</div>

これを使用する場合は幅を設定する必要があると思いますので、高さと同じように幅を追加します（必要に応じて独自の幅を設定できます）。

于 2012-08-20T20:26:54.127 に答える
0

もう 1 つのアイデアは、JavaScript を使用してメニュー div の mouseenter イベントをキャッチし、div の outerWidth() を取得してから、メニュー div の最大幅を設定することです。ホバーはこれでボックスを展開しません。 

var width = $this.outerWidth();
$(this).css({"max-width": width+"px"});

メニュー項目のオーバーフローが表示されるように設定されていることを確認してください:

$("menu items").css({overflow: "visible"});

また、mouseleave で max-width をクリアすることをお勧めします。

これは私にとってうまくいきました。

于 2013-12-05T13:15:07.333 に答える