1

画像がホバーされたときに表示する必要がある兄弟divに付随する情報を含む画像のグリッドがあり、カーソルが画像から外れると消えます。ここで同様の質問をいくつか見ましたが、正確に必要なものに対して実際に機能したものはありません。

jQueryに切り替えている別のJSライブラリを使用する、継承したサイト用ですが、まだjQueryを学んでいるので、これを理解するのに苦労しています。

ここで HTML と CSS をセットアップしました: http://jsfiddle.net/EQ2fG/

ここに必要なもののスクリーンショットがあります: http://cl.ly/JZkK

したがって、ホバーすると、兄弟の div (.property_info) は画像の div (.property) の右側に表示する必要がありますが、各行の最後の 2 つの div は左側に表示して、コンテナー/ラッパー内にとどまるようにする必要があります。 div。データは動的に生成されることに注意してください。

それが理にかなっていることを願っています。どんな助けでも本当に、本当に役に立ちます。

ありがとうございました！

4

3 に答える 3

1

CSS(3) と jQuery の組み合わせで動作するようになりました - 返信してくれた両方の人に感謝します。正しい方向にプッシュする必要がありました。

http://jsfiddle.net/angieherrera/EQ2fG/46/

于 2012-09-20T05:42:23.020 に答える
0

これには css を使用できますが、古いバージョンの IE ではサポートされません。また、それがあなたが望む/必要とするものかどうかもわかりません。しかし、いずれにせよ、これが役立つことを願っています。

.prop_info の次の css を次のように変更します。

.property .prop_info {
    width:274px;
    height:90px;
    background:url(/resources/images/backgrounds/agent-info-bg.jpg) top left no-repeat transparent;
    background: #0d70b2;
    position:absolute;
    left:136px;
    top: 0px;
    display: none;
    z-index: 10;
}

次に、これを下に追加します。

.property:hover .prop_info {
    display: block;   
}

これが何をするかというと、.property 要素にカーソルを合わせると、その中の .prop_info 要素が見えるようになります。ただし、これには .prop_info が .property 内にあるように html レイアウトを変更する必要があります。

<div class="property" id="property{count}" style="display: block;">
    <a href="#"><img src="http://placehold.it/136x90/eeeeee/cccccc/&text=placeholder" /></a>
    <div  class="prop_info">
        <div id="property_info_content">[ content goes here ]</div>
    </div>
</div>

通常は画面の外に出るすべての要素について、5番目または4番目..ウェブサイトの幅と適応するかどうかに依存するため、今はテストできません.

ただし、次の css を使用できます。

.property .prop_info:nth-child(4n+4) {
    left: -410px;
}

これが何をするかというと、4 番目の要素ごとに異なる左マージンを見つけるということです。5 番目ごとにする必要がある場合は、4n+4 を 5n+5 に変更してください。

これがお役に立てば幸いです

于 2012-09-19T21:52:37.930 に答える
0

コードを修正する必要があります。複数の要素で同じ ID を持つべきではありません。ただし、これはうまくいくはずだと思います：

$(".property").mouseover(function(){
    var wid=$(this).outerWidth();
    var left=$(this).position().left+wid;
    if(left+wid*2>$(this).parent().width())left=$(this).position().left-wid*2;
    var top=$(this).position().top;
    $(".prop_info").hide();
    $(".prop_info").eq($(".property").index($(this))).show().css({"opacity":1,"left":left,"top":top});
});
$("#property_grid").mouseout(function(){
    $(".prop_info").hide();
});

編集: ホバリングしたときに表示されたままにするには、mouseout を mouseleave に変更し、property_grid の高さを設定して、コンテンツをしっかりとラップします。

JS:

$("#property_grid").mouseleave(function(){
    $(".prop_info").hide();
});​

CSS:

#property_grid {
    width: 959px;
    height: 182px;
    margin: 0 auto;
}
于 2012-09-19T21:45:42.633 に答える