0

私はタイルのグリッドを持っています。私ができるようにしたいのは、タイルにカーソルを合わせて 3 ピクセルの境界線を追加し、周囲の他のタイルを乱すことなくタイルを正しく配置することです。現時点では、これをどのように達成できるか完全にはわかりませんか? これはフロートを使用して実現できますか?それとも、各タイルを絶対に配置してから、ホバーしたタイルの z-index を増やして、他のタイルよりも目立つようにする必要がありますか?

また、タイルの寸法は同じままである必要があり、境界線はタイルの外側にあり、はめ込まれていない必要があります。

ここでフィドル: http://jsfiddle.net/Z7TwF/

4

1 に答える 1

1

:hover セレクターで、境界線の合計幅を削除する必要があります。

li:hover{border:3px solid #f00; width: 44px; height: 44px;}

要素に境界線を追加すると、その寸法が増加します。そのため、要素にカーソルを合わせると、ディメンション属性の境界線の合計幅を削除すると、問題が修正されます。

http://jsfiddle.net/Z7TwF/2/


別の解決策は、ボックスのサイズ変更方法を変更することです。

li
{
    box-sizing: border-box;
}

これは本質的に、要素の幅で境界線の幅を計算するようブラウザに指示し、元の例でのオフセットを防ぎます。

http://jsfiddle.net/Z7TwF/3/

于 2012-08-30T10:07:53.807 に答える