0

ページ上に8つのボタン（画像）があり、すべて同じ行にあります。そして、テキストのない1つの非表示の画像（赤い長方形のボックス）。ボタン（画像）のすぐ下に同じ赤いボックスを表示したい画像に動的なテキストを表示します（ボタンのリンクに応じて表示されます）

HTMLコード：

 <div id="imageRings">
    <img id="ringOne" class="rotate" src="images/ring1.png">
    <img id="ringTwo" class="rotate" src="images/ring2.png">
    <img id="ringThree" class="rotate" src="images/ring3.png">
    <img id="ringFour" class="rotate" src="images/ring4.png">
    <img id="ringFive" class="rotate" src="images/ring5.png">
    <img id="ringSix" class="rotate" src="images/ring6.png">
    <img id="ringSeven" class="rotate" src="images/ring7.png">
    <img id="ringEight" class="rotate" src="images/ring8.png">
    </div>

つまり、これらは、ホバーしたときに、ホバーしたそれぞれの画像のすぐ下に画像を表示したい画像であり、リンクに応じてその上にテキストが表示されます（つまり、長方形のボックスに表示されたテキストを変更できるはずです）

そもそも多くのコードを提供していないことは知っていますが、他に何を提供すればよいかわかりません。上記のコードに欠けているのは長方形の箱の画像のコードだけですが、ホバリングに応じて位置を決定して変更する必要があるため、どこにも書いていません。

4

2 に答える 2

1

これを試して; 画像をインライン<li>に配置すると、ホバー時にその.rectdivをそれぞれに追加できます。例として、jsFiddleもあります。

HTML

<ul id="imageRings">
    <li><img class="rotate" src="images/ring1.png"></li>
    <li><img class="rotate" src="images/ring2.png"></li>
    <li><img class="rotate" src="images/ring3.png"></li>
    <li><img class="rotate" src="images/ring4.png"></li>
    <li><img class="rotate" src="images/ring5.png"></li>
    <li><img class="rotate" src="images/ring6.png"></li>
    <li><img class="rotate" src="images/ring7.png"></li>
    <li><img class="rotate" src="images/ring8.png"></li>
</ul>
<div class="rect"></div>​

jQuery

$('imageRings img').on({
    mouseenter: function() {
        $(this).closest('li').append($('.rect'));
        $('.rect').show();
    },
    mouseleave: function() {
        $('.rect').hide()
    }
})​;

CSS

#imageRings li{display:inline-block;}
.rect{border:1px solid red;background:#a55;height:20px;display:none;}​
于 2013-01-01T16:01:42.147 に答える
1

次のように画像を分割および/またはリストに入れます

<div id="hover">
<div class="ima 1">
<img src="your_img_1" />
<div class="fill">
</div></div>
<div class="ima 3">
<img src="your_img_2" />
<div class="fill">
</div></div>
<div class="ima 2">
<img src="your_img_3" />
<div class="fill">
</div>
</div></div>

としての位置

.ima{
float:left /*Float to make parallel*/
}

img{
display:block;
}

Jquery：

$('.ima img').hover(function(){
$(this).parent().find('.fill').html('<img src="image" />');
},
function(){
$(this).parent().find('.fill').html('  ');
}
);
于 2013-01-01T16:11:23.913 に答える