解決策を見つけようとしましたが、見つけられませんでした。 私はいくつかの画像を持っています。私は最初の画像をマウスオーバーすると、behndの画像は最初の画像の上に表示されます。例えば :マウスオーバーで他の画像の上に画像を配置するにはどうすればよいですか?
ノーマル: マウスオーバー:第二および第三の画像が最初の画像の背後にある基本的なにおいて
。 私の英語と申し訳ありません、申し訳ありません!
解決策を見つけようとしましたが、見つけられませんでした。 私はいくつかの画像を持っています。私は最初の画像をマウスオーバーすると、behndの画像は最初の画像の上に表示されます。例えば :マウスオーバーで他の画像の上に画像を配置するにはどうすればよいですか?
ノーマル: マウスオーバー:第二および第三の画像が最初の画像の背後にある基本的なにおいて
。 私の英語と申し訳ありません、申し訳ありません!
この溶液を絶対位置と、容器内になるようにボックスを必要とします。必要な効果のための
var prop = "bottom",
moveAmount = 50;
$('.container').hover(
function() {
var moved = $(this).find(".box");
for (var i = (moved.length - 1), pad = 0; i >= 0; i--) {
$(moved[i]).css(prop, (pad++ * moveAmount) + "px");
}
},
function() {
var moved = $(this).find(".box");
for (var i = 0; i < moved.length; i++) {
$(moved[i]).css(prop, "0px");
}
}
);
.container {
background-color: #eeeeee;
position: relative;
width: 45px;
height: 45px;
}
.box {
background: red;
width: 40px;
height: 40px;
transition: bottom 0.3s ease-in-out;
position: absolute;
bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br>
<div class="container">
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
</div>
これは私が感謝のために探したものです! – Sagie
あなたはover
とout
ハンドラでjQueryのhover
イベント機能を使用することができます。..
onhover
イベントを定義し、マウスがホバーアウトしていないときに再び表示しないようにするイベントを定義します。$('#1').hover(
function(){
$('.hidden').removeClass('hidden').addClass('visible');
},
function(){
$('.visible').removeClass('visible').addClass('hidden');
}
)
.box {
border: solid 2px black;
width: 40px;
height: 40px;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="3" class="box hidden">3</div>
<div id="2" class="box hidden">2</div>
<div id="1" class="box">1</div>
私は彼に画像が「1」の後ろにある必要があると思います。つまり、「1」がその上にあることを意味します。あなたの例では、それらは積み重ねられていますが、隠されています。 –
2つだけの画像は、あなたがこれまでに試してみました何 –
ポストは十分です! –