When I use a mouseenter function to change the color and opacity of a div, adding a class called "full" doesn't work as expected. However, manually changing the color and opacity using this.style.color and this.style.opacity inside the mouseenter function seems to do the trick. Why is that?
JQuery (NOT WORKING):
$('.content').mouseenter(function() {
$( ".content" ).each(function (i) {
if ( this.style.color != "#F7F7F7" ) {
this.style.color = "#F7F7F7";
this.style.opacity = "0.5";
}
});
this.addClass('full');
});
JQuery (WORKING):
$('.content').mouseenter(function() {
$( ".content" ).each(function (i) {
if ( this.style.color != "#F7F7F7" ) {
this.style.color = "#F7F7F7";
this.style.opacity = "0.5";
}
});
this.style.color = "red";
this.style.opacity = "1";
});
CSS:
.full
{
color: red;
opacity: 1;
}