###質問したいこと
jQueryのテキストで以下のようなアニメーションを実装しています。
・マウスオーバーすると、色面が左側からスライドインして、背景色と文字色の異なるボタンに変化する
・マウスアウトすると元に戻る
実装する上でfind()メソッドを使用しているのですがその引数に指定している要素「"> span"」の「>」の部分が
何を意味しているのか分かりませんでした。
テキストではspan要素を指定するということしか書いておらず、ネットで調べてもこのような記号を例にあげているような参考サイトはありませんでした。
どなたかこの「>」の指す意味をご教授お願いします。
###該当のソースコード
<!-- htmlファイル --> <div class="page-main" role="main"> <div id="buttons1"> <h2>BUTTONS1</h2> <div class="inner clearfix"> <!-- buttons1 1行目 省略 --> <!-- buttons1 2行目 省略 --> <!-- buttons1 3行目 --> <button>Ibis<span class="bg"><span>Ibis</span></span></button> <button>Jaeger<span class="bg"><span>Jaeger</span></span></button> <button>Kingfisher<span class="bg"><span>Kingfisher</span></span></button> <button>Lark<span class="bg"><span>Lark</span></span></button> </div> </div> </div>
//jsファイル $(function(){ var duration = 300; //アニメーションの時間 // buttons1 1行目 省略 // buttons1 2行目 省略 // buttons1 3行目 $("#buttons1 button:nth-child(n+9)") .on("mouseover", function(){ $(this).find(">span").stop(true).animate({ width: "100%" }, duration, "easeOutQuad"); }) .on("mouseout", function(){ $(this).find(">span").stop(true).animate({ width: "0%" }, duration, "easeOutQuad"); }); });
###試したこと
ボタンは角丸四角形なのですが
「>」をはずして動作させてみたところ色面のスライドインの開始時の一瞬だけ
角をはみ出して色面がスライドインします。(伝わらなかったらすみません。。)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/07 01:18