'Resize multiple elements when hovering on one of them

I ran into a problem and here is an example of my issue: https://jsfiddle.net/k1y8afst/

<div class="Sample">
<div class="Dummy">
<div class="Books">
                                
<a style="width: 14%; margin-left: 1%; margin-right: 1%;">DUMMY 1</a>             
<a style="width: 14%; margin-left: 1%; margin-right: 1%;">SAMPLE 1</a>
                                    
</div>
</div>
<div class="Dummy">
<div class="Prices">
<img src="https://www.lexis.se/wp-content/uploads/2022/01/ARD28940SS-scaled.jpg">

<a style="width: 14%; margin-left: 1%; margin-right: 1%;" class="">
DUMMY 2                                   
<a style="width: 14%; margin-left: 1%; margin-right: 1%;" class="">
SAMPLE 2
                                    
</div>
</div>
</div>

When I hover over "Dummy 1" then I also want "Dummy 2" to resize in same transformation."Sample 1" and "Sample 2" should be linked together in the same way. I can't figure out how I can do this, how would you do it?

htmlcsshovertransformation


Solution 1:[1]

As far as i'm aware this isn't possible with pure CSS with your markup.

You could use some javascript to achieve this effect relatively easy though. Heres how you could do it with jQuery

$(".single-dummy").hover(
    function () {
        $(".single-dummy").addClass("active");
    },
    function () {
        $(".single-dummy").removeClass("active");
    }
);

And then all you need is an 'active' class to apply the hover effect you want.

.active{
  border: 1px solid red;
}

Here's the working fiddle: https://jsfiddle.net/2mduzg4h/37/

Hopefully that helps

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jonny Jones

Related Questions