3

OK、本当に必要なものを説明できないので、それを示します。

または...言葉で試してみると、divの周りではなく、何も変更しない（幅、高さ、マージン、パディング-何も変更しない...）境界線が必要です。前述の...div

例 ：

ここに画像の説明を入力

CSS : (属性を持つ要素をターゲットにするcomp-id- 境界線の状態はmsp-selectedクラスで設定されます)

[comp-id] {
    cursor:pointer;
}

[comp-id] .msp-selected, [comp-id] .msp-selected:hover {
    border:2px solid red;
    box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

border、outline、およびを試しましたbox-sizing:border-box;が、上記のどれもレイアウトを維持しません。

だから、...これを達成する方法はありますか？

更新（ここに何がありますかbox-sizing-そうです、それらのすべて-が行います）：

ここに画像の説明を入力

最初に上部の要素を強調表示し (境界線を追加)、次に下部の要素を強調表示するとします。お気づきかもしれませんが、境界線はレイアウトに影響を与えます (パディングや sth を追加する場合など)...

4

6 に答える 6

5

はめ込み付きのボックス シャドウ:

.box:hover {box-shadow: inset 0 0 0 5px red;}

詳細については、jsfiddle を参照してください

于 2013-08-22T14:08:13.837 に答える
1

http://jsfiddle.net/KGXYR/6/

div {
    background: green;
    width: 100px;
    height: 100px;
    outline: thick solid #00ff00;
    outline-offset: -6px
}

概要

アウトラインオフセット

アップデート：

http://jsfiddle.net/XKAVF/

.box{
    width: 200px;
    height: 100px;
    background: #333;
}

.box:hover{
     outline: thick solid #00ff00;
     outline-offset: -5px
}
于 2013-08-22T14:12:01.600 に答える
0

なぜうまくいかないbox-sizingのかわかりませんが、おそらく疑似要素で偽造するとうまくいくでしょう：

div {
    background-color: #6af;
    width: 10em;
    height: 5em;
}
div:hover::before {
    content:'';
    display: block;
    width: 100%;
    height: 100%;
    border: thick solid green;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

jsフィドル

これは疑似要素に関する興味深い記事です: A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

于 2013-08-22T14:26:14.280 に答える
0

そのために box-shadow を使用できます。例 ( jsFiddle ):

box-shadow: inset 0 0 0 5px red;

-webkit-位置や高さなどを変更せずに、div の内側に 5 ピクセルの赤い境界線を描画します。また、さまざまなブラウザー プレフィックス ( 、、、-mozなど)を追加することを忘れないでください-o-。簡単にするために残しました。

編集:border-box and と 比較した利点outlineは、非常にうまくアニメーション化できることです:

box-shadow: jsFiddle vs border-box: jsFiddle

于 2013-08-22T14:06:45.013 に答える