0

私はここで働いていますhttp://tinyurl.com/a74ko2o、これはワードプレスを利用したeコマースストアであり、私の問題は単一の製品ページ、このリンクページでのcss設計にあります。ホバーすると大きな画像の下にサムネイルが表示されますサムネールに赤い枠線が表示されます

このエフェクトを追加しましたが、ホバリングしたときに画像が下に移動し、修正されない問題が発生しました。このウェブサイトのように修正する必要がありますhttp://emporium.premiumcoding.com/demo.php

サムネイル用のcssはこちら

.leftcontentsp .thumbnails img {
    border: 4px solid #343434;
    height: 92px;
    margin: 5px 4px 8px 0;
    width: 92px;
}

ホバー時

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 5px solid #d00000;
}

このCSSの問題を修正するのを手伝ってください、事前に感謝します

4

2 に答える 2

1

問題は、5px広い境界線の後に広い境界線を追加すると、画像が下に移動4pxする1px違いが生じるためです。パディングを追加および削除することでこれを修正できるため、画像は所定の位置に留まります。

.leftcontentsp .thumbnails img {
    border: 4px solid #343434;
    height: 92px;
    margin: 5px 4px 8px 0;
    width: 92px;
    padding: 1px;
}

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
    border: 5px solid #d00000;
    padding: 0;
}

:hoverまたは、間違っている場合は、法線と同じ幅で境界線を作成してください。

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
    border: 4px solid #d00000;
}
于 2013-03-02T10:34:57.873 に答える
0

違いを見る男性

同じボーダー幅を与える

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
}

自然な状態のように

1px邪魔な

そしてこれは

ホバー時の遷移

.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
    border: 4px solid #d00000;
-webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        -ms-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
    }
于 2013-03-02T10:36:21.433 に答える