I am wondering if it is possible to change the style of child when its element was hovered, while its css was also styled when its parent was hovered?
To make my question clear, I wrote down a basic code below:
//styling child while mouse is inside child element
$('child').on('hover', function(e){
if (e.type == 'mouseenter'){
$(this).css('background','yellow');
}
})
// styling child while mouse is inside parent
$('child').parents().on('hover', function (e){
if (e.type == 'mouseenter'){
$(this).css('background', 'blue');
}
})
So, basically once user enters space of parent to make child's bg blue, and once it enters space of child to change from blue to yellow bg.
I saw a comment on why I do not use css, so this is a little explanation: I am unable to select parent element. I can only do it from child using parents(). And as long as css does not support parents() method yet I went with jquery. :)
#container .panel > div
. CSS is definitely the answer here. Also usinghover()
and then checking for themouseenter
event is a little redundant - just useon('mouseenter', fn)