ちょっと前にハマったので備忘録として・・・。
これでは動きません。
body部
1 2 3 4 5 |
<body> <div class="base"> <p class="dish">お皿</p> </div> </body> |
CSS部
1 2 3 4 5 6 7 8 9 10 11 |
.dish { padding: 10px; background-color: #86C793; } .base { padding: 10px; background-color: #FFEF6D; } .bright { background-color: #D7ED83; } |
JavaScript部
1 2 3 4 5 |
jQuery(function($){ $(".dish").bind("mouseenter mouseleave", function() { $(this).toggleClass("bright"); }); } |
.dishに対して.brightでbackground-colorの重ねがけを狙っても動きません。
.css()を使ってください。