queryに挑戦しているのですが、この様に書いても反応しないので、どういう風に書けばいいか教えて頂けないでしょうか？よろしくお願いします
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$("p").hover(function(){
$(this).css("color","red");
});
</script>
みんなの回答 7 件
このコードだけみると
1）p要素が別のCSSでdisplay: none;になっている
2）$("p").mouserover(function(){});
のどちらかっぽいですね。
2つめのは
<script>
$(function(){
$("p").hover(function(){
$(this).css("color","red");
});
});
</script>
かなあ。
それから、閲覧に使っているブラウザは、IE9以下じゃないよね？
理由は↓
jQuery 2.0がついに正式リリース。IE8以前はサポートせず、より軽量で高速に － Publickey
http://www.publickey1.jp/blog/13/jquery_20ie8_1.html的外れだったら大変申し訳ないのだけど、
jQuery(function($){ と }); とで
コード全体を囲ってみたらどうだろう。
↑が半分正解。
scriptタグをheadの直前に書いた場合は、ドキュメントの描画を待ってからイベントリスナーをしないと反応しない。
ただしセレクタに指定したものは、既に描画されていれば、onでイベントを登録した時の第二引数で指定すればイベントは動く。
具体的には3つの解決法がある。
①scriptタグをbody閉じタグの直前に持ってくる
→これは根本的な解決法ではないが、それでも動くようになるかも。ただし最近はscriptタグはbodyの直前に持ってくることでブラウザ表示を優先させられるので、プログラムに関係なくともこれをしたほうがいい。
ただしグローバル変数や先に読み込ませたいjsファイル等がある場合はこれに限らない。
②セレクタをdocumentにする
→$(document).on(’mouseover’, ’p’, function (event) {
$(this).css("color","red");
});
ただしこれも根本的な解決法ではない。しかしセレクタ要素を既に描画されているものに限定して、onの第二引数で指定することで、後から動的に描画されたものに対してもイベントを拾える。(少し前のliveと同じ)
③documentの描画を待つ
→$(document).ready(function() {
// この中にプログラムを普通に書く
});
ただし慣習的にdocument.readyではなくて
$(function() {
// この中にプログラムを普通に書く
});
と書くのが一般的。
みんなやさすぃ！
queryっていうとデータベース関連の質問に見える。
っていうか、2.0でもhoverが使えることを今知った。
onで、mouseoverとmouseenterを切り分けたほうがいろいろ幸せだよ。
関連するトピックス