1

だから私はアイコンのリストを持っています.アイコンの上にカーソルを置いたときにポップオーバーをアクティブにしようとしています.

<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>

そして、私はこれを別のjsファイルに持っています

$('.icon').popover({placement:'top'});
4

4 に答える 4

4

タグの代わりに jquery 変数に属性を入れる

<img class="icon" rel="popover" src="images/brandable.png"/>

次のようにスクリプトを追加します

<script>
$('document').ready(function() {
    var popOverSettings = {
        placement: 'top',
        selector: '.icon',
        title:'Brandable',
        trigger: "hover",
        content:'This is a popover'
    };
$(this).popover(popOverSettings);
});
</script>
于 2016-01-28T08:35:39.980 に答える
0

あなたのコードのために：

<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>

trigger: "hover"有効な html ではありません。Bootstrap のヘルプ ドキュメントには、「オプションは、データ属性または JavaScript を介して渡すことができます。データ属性については、オプション名を data- のように追加しますdata-animation=""。」

したがって、代わりに data-trigger="hover" を含めることも、 の前にスペースがないように見えますsrc=。

また、html と javascript にも配置 top があります。宣言する必要があるのは 1 か所だけです。そのため、img タグから data-placement="top" を削除するか、JavaScript でそれを削除して、$('.icon').popover({placement:'top'});

また$、関数の前に " " があります。そのコードの場所によっては、jquery の競合が発生する場合があります。エラーログに表示されているエラーを投稿する必要があることを確認してください。Chrome を使用している場合は、右クリック > Web インスペクト > 下部にある赤い x をクリックし、そこに表示されるエラーをコピーします。

于 2013-11-07T03:35:08.217 に答える
-1

おそらくこれを行う最も簡単な方法は、この回答で説明されているイベントOnMouseOverとイベントを使用します： https ://stackoverflow.com/a/10709196/121737OnMouseOut

通常のアイコンと同じ幅で高さの2倍の1つの画像を使用してこれを実行したいと思います。この画像には、上下に2つのアイコンが表示されます。上のアイコンは通常のアイコンで、下のアイコンはロールオーバーされたアイコンです。

img.icon {
    display: block;
    width: 4ex; height: 4ex;
    background-size: 4ex 8ex;
    background-position: 0 0;
}

img.icon:hover {
    background-position: 0 -4ex;
}

img.icon#twitter {
    background-image:url('icons/twitter.jpg');
}

img.icon#facebook {
    background-image:url('icons/facebook.jpg');
}

この後、HTMLでアイコンを宣言すると、はるかにクリーンになります。

<img class="icon" id="twitter" />
<img class="icon" id="facebook" />
<img class="icon" style="background-image:url('icons/other_icon.jpg')" />
于 2013-02-07T20:36:17.277 に答える