Hey folks, I'm looking to translate this CSS hover effect into jQuery code.
Below is the CSS version for hovering:
index.html
<div class="container-fluid">
<div class="row why-us-box">
<div class="why-item col-xs-12 col-md-4 col-sm-4 text-center">
<div class="why-box-head">
<i class="fa fa-group"></i>
<h4>
<b>Reason 1</b>
</h4>
</div>
<p class="text-center">
Detail Reason 1
</p>
</div>
<div class="why-item col-xs-12 col-md-4 col-sm-4 text-center">
<div class="why-box-head">
<i class="fa fa-trophy"></i>
<h4>
<b>Reason 2</b>
</h4>
</div>
<p class="text-center">
Detail Reason 2
</p>
</div>
<div class="why-item col-xs-12 col-md-4 col-sm-4 text-center">
<div class="why-box-head">
<i class="fa fa-graduation-cap"></i>
<h4>
<b>Reason 3</b>
</h4>
</div>
<p class="text-center">
Detail Reason 3
</p>
</div>
</div><!-- End of why-us-box -->
</div> <!-- End of container-fluid -->
style.css
.why-item:hover .why-box-head i {
-webkit-transform:scale(1.4);
transform:scale(1.4);
}
.why-item:hover .why-box-head h4 {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
.why-item:hover p {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
.why-box-head i {
color: #607D8B;
font-size: 70px;
display: inline-block;
line-height: 40px;
margin-bottom: 30px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.why-box-head h4 {
font-size: 18px;
line-height: 1.1;
font-weight: bold;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.why-item p {
line-height: 22px;
color: #797979;
font-size: 14px;
margin-bottom: 20px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
It's been working great with CSS, but now I want to experiment with jQuery.
So, how can I target the two grandchildren and a child when the parent div (why-item div) is hovered over?
I aim to apply effects to:
the i tag which is a child of why-box-head, itself a child of why-item (the grandchild)
the h3 tag which is a child of why-box-head, again a child of why-item (the grandchild)
the p tag which is simply a child of why-item (the child)
I attempted this jQuery snippet to affect the i tag, but handling three tags simultaneously seems quite puzzling to me.
$(".why-item").hover(function(){
$("why-box-head i").css({"-webkit-transform":"scale(1.4)","transform":"scale(1.4)"});
}, function(){
$("why-box-head i").css({"-webkit-transition":"all 0.7s ease","transition":"all 0.7s ease"});
});