具有 3 个元素的动态 Flex答案

【问题标题】：Dynamic Flex with 3 Elements具有 3 个元素的动态 Flex
【发布时间】：2014-12-08 08:51:32
【问题描述】：

我有一排元素，当它们悬停时，我需要在宽度上做出响应。该行中有 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

<body>
    <div id="wrapper">
        <div id="element1">
            <!--Title-->
        </div>
        <div id="element2">
            <!--Title-->
        </div>
        <div id="element3">
            <!--Title-->
        </div>
    </div>
</body>

CSS

#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;
        }

【问题讨论】：

这有点令人困惑。你到底想完成什么？听起来您正在尝试使用条件逻辑？

标签： javascript jquery css flexbox

【解决方案1】：

您的问题有点令人困惑。我根据您的解释创建了一个小提琴。

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

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

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

});

http://jsfiddle.net/zuwejwqv/1/

【讨论】：

是的，先生！根据需要将 div 的实例更改为 ul 或 li ！确保你有正确的育儿/孩子参考