Question

我有一排元素需要在它们悬停时以宽度响应。行中有3个元素，我使用-webkit-flex来完成每个元素的初始样式。第一个元素的值设置为＆＃34; 2＆＃34;并且其他两个元素被设置为＆＃34; 1＆＃34;的值。

我希望它像这样回应悬停： - 鼠标悬停在element1上 - 没有任何反应（因为它被设置为＆＃34; 2＆＃34;的-webkit-flex值）。 - 鼠标悬停在element2上 - element1变为＆＃34; 1＆＃34;和element2成为＆＃34; 2＆＃34;的值。 - 鼠标悬停在element3上 - element1变为＆＃34; 1＆＃34;和element3成为＆＃34; 2＆＃34;。

的值

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

如果可能的话，我想用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;
        }

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

具有3个元素的动态Flex

1 个答案: