2

いくつかの画像にカーソルを合わせたときにサイズを大きくしたい。以下の例をご覧ください。それはオプションのテストです（3番目の画像）：

http://livingfunky.webresponsive.co.uk/index.php/curtains/hand-made-curtains/test-hand-made-curtain.html

.swatches-container .swatch-img,
.swatches-container .swatch-span {
  margin:0 2px 2px 0;
}

.swatches-container .swatch-img {
  border:1px solid #eee;
  max-width:30px;
  max-height:28px;
  z-index: 0;
  position: relative;
}

.swatches-container .swatch-img.current {
  border:2px solid #333;
}

.swatches-container .swatch-span {}

.swatch-img:hover {
  border:1px solid #eee;
  max-width:60px;
  max-height:46px;
  left:10px;
  cursor:pointer;
  top: -20px;
  left: -20px;
}

私が抱えている問題は、3 番目の画像にカーソルを合わせると、div が移動することです。どうすればこれを防ぐことができますか? ありがとう

4

2 に答える 2

2

取引は、画像が大きくなってもサイズが変更されないabsoluteように、画像を のように配置する必要があるということです。swatches-container

したがって、<div class="swatch-img-block"></div>小さな画像のサイズを維持する に画像を配置できるため、成長する画像によってフローが変更されることはなく、画像はabsoluteこれらに対して相対的に配置されます。<div>

次の CSS を使用してこれを行うことができます。 

.swatches-container .swatch-img-block
{
    display:inline-block; /* displayed as inline elements */
    position: relative; /* so the images can be positioned relatively to this */
    width:30px; /* keeping the image size */
    height:28px;
}

を追加することposition:absoluteによって.swatch-img:hover{ }。

編集: 互換性の問題のように見えます。.swatch-img:hoverセレクターを に置き換えることをお勧めし.swatch-img-block:hover .swatch-imgます。このように、ポインターが画像を含む上にある場合、画像は大きくなります<div>(画像が小さい場合のスペース)。また、ポインターから画像が移動する問題を回避します。

ここに動作する jsFiddle があります: LINK

于 2013-07-16T18:31:14.720 に答える
0

ホバー時にimgを絶対位置に設定できます。また、swatches-container相対的に配置する必要があります：

.swatches-container
{
  position:relative;
}
.swatch-img:hover {
  position:absolute;
}
于 2013-07-16T18:20:10.030 に答える