0

私はJqueryとBootstrap3を使用してレスポンシブロールオーバーを作成しようとしていますが、画像がレスポンシブである必要があり、IE7 +と互換性がある必要があるため、CSS3バックグラウンドを使用していないのはそのためです

これまでに試したことはすべて失敗しているため、行き詰まっています（背景画像が応答しない、IEがキャンバスと互換性がない、絶対位置に固定幅/高さが必要など）誰かが私を助けることができますか？これが私がこれまでに作ることができたものです...

HTML:

<div class="row">
    <div class="col-sm-8">
            <ul>
                <li>
                    <div class="img-swap2">
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
                    </div>
                </li>
                <li>
                    <div class="img-swap2">
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
                    </div>
                </li>
            </ul>
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        <div class="img-swap2">
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
        </div>
        <div class="img-swap2">
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
        </div>
    </div>
</div>

JQuery:

$(document).ready(function(){

    $('.img-swap2').hover(
    function(){
        $(this).children("img:eq(0)").fadeTo('400','0');
        $(this).children("img:eq(1)").fadeTo('800','1');
    },
    function(){
        $(this).children("img:eq(0)").fadeTo('800','1');
        $(this).children("img:eq(1)").fadeTo('400','0');
    });
});

CSS

ul {
    list-style-type: none;
    margin-bottom: 0;
}
ul li {
    display: block;
    float: left;
    border-left: 1px solid #333;
    width: 14%;
    max-height: 63px;
}
.img-swap2 {
    position: relative;
    left: 0;
    top: 0;
}
.img-swap2 img + img {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
}

ご覧のとおり.. ULでは正常に動作しますが、行ではホバー画像が間違って表示されます。現在は固定サイズを使用していますが、最終的なアプリケーションではいくつかの画像サイズになります

ありがとう！

4

1 に答える 1

0

Bootstrap のオフセット クラスを使用してみてください:

class="col-sm-4 text-center"

またはmargin: 0 auto;を使用します。 

// CSS
.centered {
   margin: 0 auto;
}


// HTML
<div class="container">
   <div class="centered text-center">
       centered content, wrapper for images (img-swap2)
   </div>
</div>

追加float: none;する.centeredと、Bootstrap グリッドにも残ります。

于 2014-03-28T17:07:53.857 に答える