1

私はこれに非常に長い間立ち往生しています..私はJavascriptに堪能ではないので、誰かがこれを手伝ってくれることを願っています.

シナリオは次のとおりです。

私はワードプレスを使用しています.1つのページに、カップケーキが入った大きな画像(800px X 1200px)があります。

私が達成したい効果はこれです。ユーザーが特定のカップケーキ (透明な div のレイヤーを持つ) にマウスを合わせると、画像が表示されます (320px x 320px)。

css :hover を使用してみました。Safari、Chrome、Firefox で動作します。しかし、IE では機能しません。したがって、 onmouseoverおよびonmouseoutイベントの代わりに、javascript を使用して div クラスを操作することを考えています。

PHP/HTML:

<div id="f1"></div>

CSS:

#f1{
width: 100px;
height: 50px;
left: 370px;
top: 450px;
position: absolute;
opacity:0;
}

ユーザーが透明なdivにマウスオーバーすると、画像(320px x 320px)が表示されます。

どうもありがとう！

4

4 に答える 4

2

これにはIEフィルターを使用できます。このように書いてください：

#f1{
width: 100px;
height: 50px;
left: 370px;
top: 450px;
position: absolute;
opacity:0;
filter: alpha(opacity=0);
}
于 2012-09-24T11:14:08.123 に答える
0

画像を 2 番目の div outter #f1 div に表示する場合は、これを試してください

デモ1

または、f1 divの背景画像として画像を表示したい場合は、これを試してください

デモ 2

于 2012-09-24T16:45:21.223 に答える
0

:hoveropacityは IE7+ でサポートされていますが、バグやサポートされていないその他の問題がある可能性がありhasLayoutます。

これはjavascriptで行うことができます：

var div = document.getElementById('f1');
div.onmouseover = function() {
    div.className += ' hover';
};
div.onmouseout = function() {
    div.className = div.className.replace(/\shover/,'');
}

または jQuery:

$('#f1').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

マウスオーバーすると要素にクラスが追加されるhoverため、スタイルを設定できます。

#f1.hover{ background:url(path/to/img.jpg); };
于 2012-09-24T11:13:27.000 に答える