-1

Foundation 4 は初めてですが、コーディングの経験はあります。カスタム ビルドのテーマを使用した Wordpress に基づく現在の写真ブログ (www.momentaryawe.com/blog) を、Foundation 4 を使用したカスタム ビルドのテーマに移行しています。

私はほとんどすべてを思い通りに機能させることができましたが、次の点で行き詰まっています。このリンク ( http://www.momentaryawe.com/blog/a-blur-of-colours/ ) を見ると、現在私が行っている方法は、誰かが画像をロールオーバーしたときであることがわかります。カメラからの元の画像である別の画像が表示されます。これらの画像は両方とも、投稿の作成時にアップロードされます。このロールオーバーは、次の jQuery コードで行われます。

$(function() { 
  $("#rolloverOriginal ul li").hover(
    function() { 
        $(this).find('p').fadeIn(); 
    },
    function() { 
        $(this).find('p').fadeOut();
    }
);
});

Foundation 4 はホバー オプションがないように見える Zepto を使用しているため、Foundation 4 を使用して同じ効果を行う方法に行き詰まっています。転がる。

4

1 に答える 1

0

必要に応じて zepto をスキップして jQuery を使用できます。このコードを使用している場合は、jquery ファイルを含めるか、CDN を使用するように変更してください。

<!-- Check for Zepto support, load jQuery if necessary -->
<script>
  document.write('<script src=/js/vendor/'
    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js><\/script>');
</script>

なる:

<!-- Check for Zepto support, load jQuery if necessary -->
<script>
  document.write('<script src=/js/vendor/jquery.js><\/script>');
</script>

または CDN バージョン:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

ブラウザーが zepto をサポートしていないため、私は jquery を使用する傾向があります。

更新: jquery v1.10.1 を含めましたhoverが、サポートされていないため、代わりにそのコードを使用するように変更しmouseenter、mouseleave.

$(function() { 
  $("#rolloverOriginal ul li")
    .on('mouseenter', function() { 
        $(this).find('p').fadeIn(); 
    })
    .on('mouseleave', function() { 
        $(this).find('p').fadeOut();
    });
});
于 2013-10-30T11:56:26.940 に答える