0

私は現在、小さい方がクリックされたときに大きい方の画像を変更するギャラリーを持っています。最も重要なコードは次のとおりです。

.n1:focus span
{
background: url('images/Boot.png')
}

それで

<a class="thumb n1" href=# tabindex=1>
<img src=images/Boot.png><span>
<img src=""><br>Boot</span></a>

これをオンホバーまたはオンマウスオーバーで発生させる方法がわかりません。

これが私が必要とするものの例です：http：//thelittleappfactory.com/ripit/

誰かが何か洞察を持っていますか？javascriptを使用してリンクonmousehoverを開こうとしましたが、ブラウザにポップアップとして表示されました。

4

2 に答える 2

0

まず、画像のサムネイルと大きなバージョンが必要です。あなたのコードでは、単一の画像があるようです。大きな画像は css display:none で非表示にし、絶対に配置して、すべてが重なり合うようにする必要があります。jquery の mouseenter および mouseleave イベントを使用します。mouseover イベントは、カーソルが要素の上に移動するとトリガーされ、呼び出しが多すぎます。

    <div class="item n1">
        <img class="thumb" src="images/boot_thumb.png" alt="boot/>
        <img class="big" src="images/boot_big.png" alt="boot/>
    </div>

このJavaScriptコードはトリックを行います：

    $('item').mouseenter(function(){
        $(this).children('big').fadeIn();
    });

    $('item').mouseleave(function(){
        $(this).children('big').fadeOut();
    });
于 2013-01-22T19:07:20.807 に答える
0

私は実際に純粋な CSS でこれを行う方法を見つけました。それは不可能だと言われたので、それが必要だと思われたので、それはかなり驚異的だと思いました. この手法のソース コードは次のとおりです。

http://ostmosis.com/OnHoverChangeImage.zip

于 2013-01-23T02:39:04.510 に答える