-1

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?

Pontus Eriksson
  • 47
  • 5
  • Using the adjacent sibling combinator (+) you can achieve this in the one direction (hover over the first `.Dummy` element, will affect the second) - but not the other way around. The latter would require that you create `:hover` rules for `.Sample` as well. – CBroe May 04 '22 at 15:02
  • Thanks for your quick respond, can you show me by updating JSFiddle? If I hover over "Dummy 2" I also want the hover effect on "Dummy 1" – Pontus Eriksson May 04 '22 at 15:07
  • Applying this to the inner Dummy X and Speaker X elements separately will not be possible with this structure. You can only do this on a sibling level - when the first `.Dummy` element gets hovered, you can access the second `.Dummy` or descendants thereof in your rule, but you can't hover the inner `DUMMY 1` element only, and then try to format other elements outside of that "context" based on it. (Because the answer to [Is there a CSS parent selector?](https://stackoverflow.com/q/1014861/1427878) is still No.) – CBroe May 04 '22 at 15:12
  • Not with CSS alone, but by applying additional JavaScript. – CBroe May 04 '22 at 15:25

1 Answers1

0

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

Jonny Jones
  • 1