1

私は現在、ホバー状態のdivで背景画像を表示および非表示にすることが可能かどうかを調べています。
ここにいくつかのコードがあります：HTML

<div class="thumb">
    <div class="text">
        Header<br>
        Sub-header<br><br>
        Date
    </div>
</div>

<div class="thumb">
    <div class="text">
        Header<br>
        Sub-header<br><br>
        Date
    </div>
</div>

<div class="thumb">
    <div class="text">
        Header<br>
        Sub-header<br><br>
        Date
    </div>
</div>

CSS

.thumb {
    width: 400px;
    height: 250px;
    background-color: silver;
    font-weight: bold;
    background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.text {
    padding: 15px;
}

つまり、基本的に背景画像と背景色を交互に切り替えたいので、divにカーソルを合わせると背景画像が表示され、マウスアウトすると背景画像が非表示になり、背景色（シルバー）に戻ります。
これは疑似クラスを介して実行可能であることがわかりましたが、これはCMSサイトの場合であるため、画像はその場で変更されるため、htmlを介して挿入する必要があります。

style="background-image: url('insert url here')"

これは、背景画像を非表示にして表示することは可能ですか？

4

3 に答える 3

3

:hover疑似クラスを使用して、ホバーしたときに画像を表示/非表示にできない理由はありますか？

例えば：

div {
    background-image: none;
}


div:hover {
    background-image: url('insert url here');
}
于 2013-02-07T20:40:34.097 に答える
2

Javascript（またはjQuery）の使用に反対していますか？

そうでない場合は、.hover()jQueryの関数を使用した解決策があります。新しい画像に新しいクラスを追加したくないとおっしゃいました。だから私はあなたが.thumb要素にURLを保存することを提案しています。

HTML：

<div class="thumb" data-hoverimage="http://placekitten.com/250/400">
    <div class="text">Header
        <br>Sub-header
        <br>
        <br>Date</div>
</div>
<div class="thumb" data-hoverimage="http://placekitten.com/250/300">
    <div class="text">Header
        <br>Sub-header
        <br>
        <br>Date</div>
</div>
<div class="thumb" data-hoverimage="http://placekitten.com/400/250">
    <div class="text">Header
        <br>Sub-header
        <br>
        <br>Date</div>
</div>

各サムネイルのURLを属性に保存しましたdata-hoverimage（任意のURLにすることができます）。

次に、jQueryを使用して、ホバー関数を使用できます。1つ目functionはカーソルが上にあるとき用で、2つ目はカーソルが外にあるとき用です。

$(".thumb").hover(function(){
    var imgurl = $(this).data("hoverimage");
    $(this).css("background-image", "url(" + imgurl + ")")
}, function(){
    $(this).css("background-image", "");
});

私はここに実用的なモデルを持っています：http：//jsfiddle.net/auURQ/

于 2013-02-07T21:57:18.423 に答える
0

このCSSを使用する

.thumb:hover{
   background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
.thumb {
      width: 400px;
      height: 250px;
      background-color: silver;
      font-weight: bold;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
}

.text {
    padding: 15px;
}

Divごとに異なる画像がある場合これには2つの方法があります

1）それらの共有cssとホバー画像専用のcssを作成します

#thumb1:hover{
   background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
#thumb2:hover{
   background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
.thumb {
      width: 400px;
      height: 250px;
      background-color: silver;
      font-weight: bold;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
}

.text {
    padding: 15px;
}

別の方法は、JSまたはJQueryLibを使用してホバーイベントを設定することです。

于 2013-02-07T20:42:37.930 に答える