More than 5 years have passed since last update.

toggleClassはCSSの設定を上書きしない

Last updated at 2014-07-07Posted at 2014-07-07

初学者（水蕗おじさん）がひっかかったので、備忘録として・・・。
これでは動きません。

body部

<body>
<div class="base">
<p class="dish">お皿</p>
</div>
</body>

CSS部

.dish {
	padding: 10px;
	background-color: #86C793;
}
.base {
	padding: 10px;
	background-color: #FFEF6D;
}
.bright {
	background-color: #D7ED83;
}

JavaScript部

jQuery(function($){
	$(".dish").bind("mouseenter mouseleave", function() {
		$(this).toggleClass("bright");
	});
}

.dishに対して.brightでbackground-colorの重ねがけを狙っても動きません。
.css()を使ってください。

.addClassや.removeClassも同様です。