Javascript 具有3个元素的动态Flex

我有一行元素，当它们悬停在上面时，我需要在宽度上做出响应。行中有3个元素，我使用-webkit-flex对每个元素进行初始样式设置。第一个元素的值设置为“2”，其他两个元素的值设置为“1”

我希望它对悬停做出如下响应： -将鼠标移到element1上-不会发生任何事情（因为它被设置为-webkit flex值“2”）。 -将鼠标移到element2上-element1的值为“1”，element2的值为“2”。 -将鼠标移到element3上-element1的值为“1”，element3的值为“2”

我还希望它在初始元素更改为1后作出响应： -（element2=2的值）将鼠标悬停在element3-element2=1和element3=“2”上。 -等等

如果可能的话，我想用CSS来实现这一点。我意识到这对CSS来说可能有点过于动态，我的问题必须用JS来处理

提前谢谢你

下面是一个简单的例子：

HTML

---

你的问题有点让人困惑。我根据你的解释创作了一把小提琴

它确实使用jQuery，但非常简单：

当鼠标进入容器内部的div时，它会添加一个名为.wrapper hovered的类。这会将容器宽度设置为200%，当您将鼠标悬停在其任何同级上时，它会从同级上删除该类，并将其添加到您所悬停的元素中

$(document).ready(function() {
    $("#wrapper div").hover(function(){
       $(this).addClass("wrapper-hovered");
        $(this).siblings("div").removeClass("wrapper-hovered")
    });

});

---

这只是有点让人困惑。你到底想完成什么？听起来你在尝试使用条件逻辑？是的，先生！根据需要将div的实例更改为ul或li！确保你有正确的父母/孩子参考资料

#wrapper {
    display: -webkit-flex;
}

#wrapper div {
    height: x;
}

        /****Element Flex Rules****/
        #wrapper element1 {
            -webkit-flex: 2;
        }

        #wrapper element2 {
            -webkit-flex: 1;
        }

        #wrapper element3 {
            -webkit-flex: 1;
        }

$(document).ready(function() {
    $("#wrapper div").hover(function(){
       $(this).addClass("wrapper-hovered");
        $(this).siblings("div").removeClass("wrapper-hovered")
    });

});