悬停在其中一个时调整多个元素的大小

发布于 2025-01-26 07:56:28 字数 1016 浏览 5 评论 0原文

我遇到了一个问题，这是我问题的一个例子：

<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>

https://jsfiddle.net/k1y8afst/ 虚拟2“要调整相同转换的大小。”样本1和“样本2”应以相同的方式链接在一起。我不知道如何做到这一点，您将如何做？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赢得她心 2025-02-02 07:56:28

据我所知，对于您的标记，纯CSS是不可能的。

但是，您可以使用一些JavaScript来实现此效果相对容易。这是您如何用jQuery做到这一点的

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

，然后您需要的只是一个“活跃”类，以应用所需的悬停效果。

.active{
  border: 1px solid red;
}

这是工作的小提琴：

”

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.