どろろぐ:hoverで無理な時にjQueryのmouseoverを使ってマウスオーバーを簡単に実装するやり方UPDATE:2013年11月9日:hoverのマウスオーバー処理ではかゆいところに手が届かない。トップページの記事一覧にマウスオーバー効果を実装しました。実装にはjQueryを使用しました。マウスオーバーといえば、cssのhoverという疑似クラスがおなじみですが、実務で使っているとなかなか自由度が低く扱いづらいなぁと感じていました。このサイトのトップページなんかもまさにhoverが使いにくいです。この一覧部分にマウスが乗った場合に、見出しの文字の色と画像の枠の色を変えたいなぁと思ったとしても、hoverだとマウスを乗せた場所以外のスタイルを変更することができません。結果、画像の上に乗せたら画像の枠の色は変わるけど見出しの色は変わらず、また、見出しの上に乗せたら見出しの色は変わるけど画像の色は変わらずというチグハグな効果しかつけることができないのです。jQueryのmouseoverメソッドを使用する。JavaScriptライブラリであるjQueryであればその辺も細かく指定することができます。コードはこういう感じです。※分かりにくくなるので、phpからhtmlに直しています。class="list-date"><!--ここに日付が入ります。class="list-title"><!--ここに見出しが入ります。class="list-intro"><!--ここに抜粋が入ります。});</script>これでOKです!こんな感じで、ボックスの上にマウスを乗せれば、枠と見出しの両方に効果を与えることができました!またアニメーションをつけたい場合には、css3のtransitionプロパティを追加で記載してあげれば大丈夫です。その場合JavaScriptは以下のようになります。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。me@drox_um音楽と面白い人が好き。音楽と面白い人は仲良くして下さい。