I am facing a challenge with my current setup:
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
My goal is to change the background color of all children simultaneously when the mouse hovers over any one of them. I attempted the following:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$(this).css('background-color', 'gray');
},
function(){
$(this).css('background-color', 'red');
});
});
</script>
Unfortunately, the color change does not apply to the children <div>s.
Is it possible to target the descendants of "this"? I have multiple sets like this in a row, so I believe using "this" is necessary to avoid calling each parent by id. I am thinking of something like this:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$(this "div").css('background-color', 'gray');
},
function(){
$(this "div").css('background-color', 'red');
});
});
</script>
However, I am struggling to make it work - all the examples I found on jquery.com use the id selector and do not involve "this".
Thank you for your help!