I am a beginner in the world of JavaScript and I'm attempting to create a simple function that will activate multiple div hover effects. I have tried various approaches so far, but I believe this code is closer to the solution. Any assistance from someone would be greatly appreciated.
$(function() {
$(document).on('mouseenter','.Test1', function() {
if($('.Test2').hasClass('Test2')) {
$('.Test2').toggleClass('Test2:Hover');
}
});
});.Test1{
position:relative;
width:200px;
height:200px;
background-color:#951159;
}
.Test1:Hover{
position:relative;
width:200px;
height:200px;
background-color:#654654;
}
.Test2{
position:relative;
width:200px;
height:200px;
background-color:#147852;
}
.Test2:Hover{
position:relative;
width:200px;
height:200px;
background-color:#654654;
}<div class="Test1">1</div>
<div class="Test2">2</div>Thank you in advance.
PS: I am aware that this could be achieved using only CSS, but I specifically require it to be done with Javascript.