2

商品画像にカーソルを合わせたときに、商品画像の上に表示したい画像があります。

http://i47.tinypic.com/vz2oj.gif

これは私が使用しているものです：

.centerBoxContentsFeatured img:hover {
    background-image:url('http://i47.tinypic.com/vz2oj.gif');
    }

動作しますが、商品画像の上ではなく後ろに表示されています。絶対配置と z-index を試しましたが、何もうまくいかないようです。

http://www.pazzle.co.uk - メイン ページの画像に適用しようとしています。<<

編集：

#featuredProducts.centerBoxWrapper {
   position: relative;
   }
#featuredProducts.centerBoxWrapper:hover:before {
    content: '';
    width: 187px;
    height: 179px;;
    position: absolute;
    top: 0;
    left: 0;
    background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
4

2 に答える 2

4 
a {
    display: block;   
    position: relative;
    width: 100px;
    height: 100px;
}
a:hover:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image:url('http://i47.tinypic.com/vz2oj.gif');
}​

デモ

擬似要素を使用します。

于 2012-10-24T01:03:09.733 に答える
3

まさにやるべきことをやっています。これは背景なので、コンテナのコンテンツの背後に表示されます。

ここでしなければならないことは、ホバリングしている画像の上に div を重ねることです。これは純粋な CSS ソリューションで可能だと思いますが、JavaScript を使用すると簡単になる場合があります。

この質問を参照してください: CSS のホバー オーバーレイ イメージについて

于 2012-10-24T01:02:43.323 に答える