Currently using the .switchClass function on both the .container divs whenever I hover, causing all child1 elements within these containers to change from 100% width to 40% width. However, I only want this switch to occur on the specific container that I'm hovering over. Avoiding the use of IDs due to the large number of rows I need to create, approximately 30 in total.
The layout consists of multiple rows with a container followed by two side-by-side divs known as child1 and child2. During the default state, child1 spans the full width of the container, but upon hovering over said container, I aim to have both child1 and child2 slide over, resulting in child1 being 40% wide and child2 adjusting its width automatically. The current implementation utilizes the switchClass function to achieve this transition effectively.
Despite having successfully implemented the animation, the issue arises when hovering over one container triggers the effect on all divs bearing the "container" class. My understanding of jQuery is self-taught through online resources like Google and StackOverflow, so my knowledge is rather limited, and I've yet to explore many other functions.
Suggestions advising the use of $(this) as the selector have been found but incorporating it while switching the class of child1 based on container hover remains challenging. It ends up attempting to alter the class of .container itself instead of isolating it for each hover event.
Resorting to unique IDs has been avoided due to the high quantity of rows required on the page. Aiming to provide brief summaries related to each image upon hover without compromising performance or code cleanliness.
Reference jsfiddle: https://jsfiddle.net/sling/d6x4sfLn/
$(function() {
$(".container").on('click', function() {
$(".image-card").switchClass("image-card", "image-card-hover", 1000);
$(".image-card-hover").switchClass("image-card-hover", "image-card", 1000);
});
});.container {
width: 100%;
height: 50vh;
display: block;
overflow: hidden;
.image-h2 {
color: white;
padding: 1px;
margin: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.image-card {
background-image: url("http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg");
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.image-card-hover {
background-image: url("http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg");
background-image: url("http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg");
background-size: cover;
background-position: center;
width: 40%;
height: 100%;
position: relative;
display: inline-block;
}
.text-card {
display: inline-block;
width: 40%;
padding-left: 1em;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container" id="first">
<div class="image-card">
<h2 class="image-h2">
This is the first project
</h2>
</div>
<div class="text-card">
<h2>
Title
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere urna non magna imperdiet, non commodo magna finibus. Integer vel lacus sit amet augue imperdiet malesuada. Praesent hendrerit gravida ligula, ac tempor sapien pharetra eget. Maecenas
hendrerit, odio quis eleifend vehicula, lacus dui pretium urna, quis facilisis tortor augue eget ipsum. Sed viverra massa vitae pretium tristique. Quisque nec felis mi.
</p>
</div>
</div>
<div class="container" id="second">
<div class="image-card">
<h2 class="image-h2">
This is the first project
</h2>
</div>
<div class="text-card">
<h2>
Title
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere urna non magna imperdiet, non commodo magna finibus. Integer vel lacus sit amet augue imperdiet malesuada. Praesent hendrerit gravida ligula, ac tempor sapien pharetra eget. Maecenas
hendrerit, odio quis eleifend vehicula, lacus dui pretium urna, quis facilisis tortor augue eget ipsum. Sed viverra massa vitae pretium tristique. Quisque nec felis mi.
</p>
</div>
</div>All containers are currently activating the hover effect instead of just the targeted one.