Attempting to apply a subclass to a class using jQuery has proven tricky. The CSS in question is as follows:
.block:nth-child(7) .permahover {
top: 0 !important;
left: 0 !important;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(0, 0) !important;
-ms-transform: translate(0, 0) !important;
transform: translate(0, 0) !important
}
Meanwhile, here is the corresponding JavaScript for reference:
$(".block:nth-child(7)").mouseenter(function () {
$(".block:nth-child(7)").addClass("permahover");
});
An issue arises when attempting to remove the ".block:nth-child(7)" from the class name and leaving it simply as ".permahover." While this workaround does work, it is necessary for the subclass to remain intact. I have attempted replacing ".addClass("permahover")" with ".addClass("block:nth-child(7) .permahover")," but as anticipated, it did not yield the desired outcome. Is there a potential solution to this dilemma? If not, are there any alternative methods available (even if they necessitate abandoning the use of jQuery)?