-2

次のコードがありますが、「前へ」または「次へ」ボタンが表示されるとmouseover、ボタンでイベントを実行するとちらつきます。

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Portfolio</title>
     <link rel="stylesheet" href="css/global.css">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script src="js/jquery.easing.1.3.js"></script>
 <script src="js/slides.jquery.js"></script>

     </head>
     <body bgcolor="#FFFFFF">
 <div id="container">
     <div id="example">
    <div id="slides">
        <div class="slides_container">
            <img src="imgs/test.gif" width="800" height="456" id="gallery_img" border="0"/>
            </div>
        <div class="prevButton" style="visibility:hidden"><a href="#" class="prev"><img src="imgs/arrow-prev.png" width="24" height="43" alt="Arrow Prev"/></a></div>
        <div class="nextButton" style="visibility:hidden"><a href="#" class="next"><img src="imgs/arrow-next.png" width="24" height="43" alt="Arrow Next"/></a></div>
         </div>
      </div>
  </div>
     <script>
        $(document).ready(function() {
        $('#gallery_img').mouseover(function() {
            $('.prevButton').css("visibility", "visible");
            $('.nextButton').css("visibility", "visible");
        });

        $('#gallery_img').mouseout(function() {
            $('.prevButton').css("visibility", "hidden");
            $('.nextButton').css("visibility", "hidden");
        });
         });
     </script>

     </body>
     </html>
4

3 に答える 3

1

一部のブラウザは、ページに表示されないソースをロードしない傾向があります。これらのソースは、cssルールによって非表示になっています。display:noneまたはvisibility:hidden-またはその親のいずれかが非表示になっています。これは実際には、ブラウザが各Webページのキャッシュ内のスペースを保持しようとしているためです（速度/効率の理由から）。

とにかく、隠されているものをプリロードする（そしてブラウザのキャッシュを作成する）には、2つの解決策を考えることができます：隠されていないがオフセットされている要素にそれらをロードする（ユーザーには見えないようにする）か、次のようなJavascriptアプローチを取ります続く。

<script type="text/javascript">
    var imgArr = ['arrow-prev.png','arrow-next.png'];
    for (var i = 0; i < imgArr.length; i++) {
        var img = new Image();
        img.src = 'imgs/' + imgArr[i];
        img.onload = function(){}; // this is dummy. not sure if it's needed
    }
</script>

それがあなたが遭遇しているものであるかどうかはわかりませんが、あなたはそれを試してみたいかもしれません。

編集：コードを読み直してください。今何が起こっているかというと、ボタンの上にマウスを置くと、実際にはマウスが最初に画像を離れ、マウスアウト機能がトリガーされます（マウスを動かすとマウスオーバー機能に戻ります）。

于 2012-10-09T02:40:22.107 に答える
0

純粋なCSSで同じ効果を達成できるため、これにはJavaScriptは実際には必要ありません。

#slides:hover div.prevButton, #slides:hover div.nextButton
{
    visibility: visible;
}

これには、sのインラインスタイルを削除する必要があります。これはdiv、外部スタイルシートのすべてと、で定義されているすべてをオーバーライドするため<head>です。次のようなスタイルを定義できるはずです。

div.prevButton, div.nextButton
{
    visibility:hidden;
}

HTH。

編集： jsFiddle。

于 2012-10-09T03:11:38.157 に答える
0

この jsfiddle コンテンツを試してください。それはあなたを助けるでしょう。デモ

これは、マウスオーバーの代わりに jquery() ホバー API を使用しています。

以下はサンプルコードです。

$(document).ready(function() {
     $("#b").hide();
     $("#a").hover(
           function(){
              $("#b").show();   
             },
           function(){
            $("#b").hide();  
             }                          
     )

 });
于 2012-10-09T03:32:39.987 に答える