0

セクションが編集可能であることを示すために、サイトのさまざまなセクションに追加されるクラスがあります。クラスの名前は.editable

ユーザーがログインしているときに、そのようなセクションにカーソルを合わせると、そのセクションの周りに赤い破線の境界線が表示されます。

私は現在これを次のように行っています：

.editable { /* add padding to act as clear border */
    padding:1px; 
}
.editable:hover { /* remove padding and add border */
    padding:0px; 
    border:1px dashed red 
}

コメントに示されているように、1px のパディングを追加して、ホバー時に境界線が表示されたときにセクションが「移動」しないようにします。

この問題は、編集するセクションにすでにパディングがある場合に発生します。例えば

.sectionToBeEdited {
    padding:10px;
}

.editable クラスを追加すると<div class="sectionToBeEdited editable">blah</div>、パディングが上書きされます。

QUESTIONパディング設定を継承し、それに 1px を追加する方法はありますか? 次に、ホバーすると、パディングを1px減らします。

これを行う別の方法は、編集可能なセクションを個別の div でラップし、そこにパディングを適用することですが、それには多くのクラスと div を書き直して追加する必要があります。

または、これを行う別の方法はありますか？

4

3 に答える 3

1

ブラウザのサポートに応じて、いくつかの選択肢があります。

  1. transparent境界線がありred、ホーミング時に色を変更するだけです
  2. outline: 1px dashed red;ボックスのサイズに影響しない境界線にアウトラインを使用する
  3. ホバーを追加margin: -1px; border: 1px dashed red;して、ボックスがすべての辺で 1px 引き伸ばされるようにします
于 2013-04-18T08:25:28.777 に答える
0

これは私が行ったものです：

.editable { 
    border: 1px dashed rgba(255, 0, 0, 0);
}
.editable:hover { 
    border: 1px dashed rgba(255, 0, 0, 1);
}

ホバー時に境界線の不透明度を 0 と 1 に設定します

于 2013-04-18T10:01:57.937 に答える