0

基本的に、私はいくつかのアイコンを持っており、誰かがアイコンの上にカーソルを置いたときに、それらのアイコンの上のコンテンツを変更したいと考えています。現時点での私の計画は、マウスオーバーを使用して、div の不透明度を変更するクラスを追加/削除し、絶対位置で div を互いにオーバーラップさせることです。私は独学の開発者なので、振り返ってみると、必要以上に物事を難しくしていることがよくあります。:) 私が離れているコミュニティのいくつかに、この設定について意見を求めることにしました。たぶん、私が完全に見逃しているより良い方法があります。IE8と互換性がある必要があります。

ここに画像の説明を入力

編集: jQuery 1.8.3 を使用しています。それを残してすみません。

4

3 に答える 3

1

あなたの質問はちょっと漠然としていました。タグ「jquery」を使用したので、サイトで何らかのバージョンの jquery を使用していると思います。

私はあなたのために簡単なjsfiddleを作りました：http://jsfiddle.net/pMCxP/2/

mouseoverイベントを使用する代わりに、イベントを使用しhoverました。

$(this).hover(function(){
        $("#content div").hide();
        var contentBlock = $(this).attr('class');
        $("#" + contentBlock).show();
    });

コードでは、各コンテンツ ブロックに id を指定し、対応するボタン/アイコンの css クラスをコンテンツの id と同じに設定しました。次に、それを使用して、ホバー時にブロックを表示できます。

それがあなたの助けになること、または少なくとも正しい方向に向けることを願っています.

于 2013-07-02T18:01:19.630 に答える
1

これは、「アイコン」のマウスオーバーごとに html と css を事前定義できるメソッドです。

ライブ版: http://jsfiddle.net/gSAjV/2240/

var content1 = '<p>This is some html that will fill the content window</p>';
var content2 = '<p>This is more html that will fill the content window</p>';
var content3 = '<p>This is other html that will fill the content window</p>';
var content4 = '<p>This is even more html that will fill the content window</p>';

$('#icon1').mouseover(function(){
    $('#content').html(content1);
    $('#content').css( "background-color", "red" );
});
$('#icon2').mouseover(function(){
    $('#content').html(content2);
    $('#content').css( "background-color", "orange" );
});
$('#icon3').mouseover(function(){
    $('#content').html(content3);
    $('#content').css( "background-color", "yellow" );
});
$('#icon4').mouseover(function(){
    $('#content').html(content4);
    $('#content').css( "background-color", "green" );
});

これは機能しますが、私の知る限り、div コンテンツを変更するときにクリーンなトランジションを追加することははるかに困難です。フェードやその他の「A」から「B」へのトランジションが必要な場合は、提案したように、すべてのコンテンツを複数の階層化された div にプリロードすることをお勧めします。

2 つの div のみを使用してトランジションを作成することもできます。1 つの div は現在のコンテンツを保持し、もう 1 つはマウスオーバーで新しいコンテンツをロードし、ロードされるとフェード (トランジション) します。

于 2013-07-02T18:12:17.757 に答える
1

私はこのように構築します

http://jsfiddle.net/UQPe3/1/

HTML

<div class='container'>
    <div class='slide1'>slide1</div>
    <div class='slide2 hidden'>slide2</div>
    <div class='slide3 hidden'>slide3</div>
    <div class='slide4 hidden'>slide4</div>
</div>

<div class='icon-wrapper'>
    <div class='icons'>
        <button type='button' data-slide='slide1'></button>
        <button type='button' data-slide='slide2'></button>
        <button type='button' data-slide='slide3'></button>
        <button type='button' data-slide='slide4'></button>
    </div>
</div>

CSS

.container div {
    background: #999;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    text-align: center;
    width: 600px;
}

.icon-wrapper {
    text-align: center;
}

.icons {
    display:inline-block;
}

.icons button {
    background-color: #999;
    border: none;
    cursor: pointer;
    height: 60px;
    margin-left: 30px;
    margin-right: 30px;
    width: 60px;
}

.icons button:hover {
    background-color: #333;
}

.hidden {
    display: none;
}

JS

$('.icons button').on(
{
    mouseenter: function()
    {
        $('.container div').addClass('hidden');
        var show_slide = $(this).attr('data-slide');
        $('.' + show_slide).removeClass('hidden');
    }
});
于 2013-07-02T18:26:26.693 に答える