タグ

ブックマーク / taneppa.net (2)

  • [jQuery]マウスホバー開閉ナビがアニメーションし続ける問題と解決法 | たねっぱ!

    「マウスホバーで開閉するナビをjQueryで作ったものの、カーソルを連続で往復させるとカーソルを止めてもしばらくナビが開閉し続けてしまう」なんて状況に遭遇したことはないでしょうか?今回はそんな問題の解決法に関して原因とともにご紹介したいと思います。 「マウスホバーで開閉するナビをjQueryで作ったものの、カーソルを連続で往復させるとカーソルを止めてもしばらくナビが開閉し続けてしまう」なんて状況に遭遇したことはないでしょうか? ちょうどこの前そんな状況に遭遇したので、今回はこの問題の解決法に関して原因とともにご紹介したいと思います。 問題のあるパターン 「カーソルを乗せると開き、カーソルを外すと閉じるナビ」なんてものを作ろうとした場合、最初に思いつくのは以下のようなコードかと思います。 ソースコード $(function() { var $subNav = $('.subNav'); $(

    [jQuery]マウスホバー開閉ナビがアニメーションし続ける問題と解決法 | たねっぱ!
    hrt305
    hrt305 2017/10/26
  • CSSの display: inline、display: block、display: inline-block をマスターしよう! | たねっぱ!

    CSS の display プロパティについて紹介します! display: inline・display: block・display: inline-blockについてのおさらい。HTMLCSSひよこちゃん向け! いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です! displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示

    CSSの display: inline、display: block、display: inline-block をマスターしよう! | たねっぱ!
  • 1