Question

我有一行3个元素，它们使用JS来显示悬停时的flex属性。它有效，但H3元素中嵌套在每个元素内的文本具有不同的长度。这篇文章的长度推动了宽度。如果我将它们全部设置为相同的文本，它们会正确显示。

我将使用此代码两次，因此最终会有两列。但是，第二行在每个H3元素中都有完全不同的文本。

我希望盒子不受文字的影响。我尝试的一切似乎都行不通。有什么建议吗？

HTML

<ul id="ul2">
    <section class="secLI">
        <a href="plan/plan.html" class="li4">
            <li>
                <h3>Plan an Event</h3> 
            </li>
        </a>
    </section>
    <section class="secLI">
        <a href="bands/bands.html" class="li5">
            <li>
                <h3>Band Promo</h3>
            </li>
        </a>
    </section>
    <section class="secLI">
        <a href="contact/contact.html" class="li6">
            <li>
                <h3>Contact</h3>
            </li>
        </a>
    </section>
</ul>

JS

<script>
    $(document).ready(function() {
        $("ul section").hover(function(){
           $(this).addClass("wrapper-hovered");
            $(this).siblings("section").removeClass("wrapper-hovered")
        });

    });
</script>

CSS

ul {
    display: -webkit-flex;
}

.wrapper-hovered {
    -webkit-flex: 1.5;
}

Answer 1

首先，除了<ul>元素之外，您不能在<li>之后直接放置任何内容。

用包裹div替换那个ul并完全删除li。
将flex属性放在节上。非悬停部分为flex: 1，在悬停时更改为flex: 2以调整大小。
使用CSS :hover pseudo class而不是使用jQuery
在悬停时使用transition看起来漂亮。 transition property适用于非悬停部分

在前缀版本之后为现代浏览器提供无前缀的flex属性。

演示

#wrap { display: -webkit-flex; display: flex; } #wrap section { -webkit-flex: 1; flex: 1; cursor: pointer; background: #cddc39; transition: all 0.2s; text-align: center; } #wrap section:hover { -webkit-flex: 2; flex: 2; background: #e6ee9c }

<div id="wrap"> <section class="secLI"> <a href="plan/plan.html" class="li4"> <h3>Plan an Event</h3> </a> </section> <section class="secLI"> <a href="bands/bands.html" class="li5"> <h3>Band Promo</h3> </a> </section> <section class="secLI"> <a href="contact/contact.html" class="li6"> <h3>Contact</h3> </a> </section> </div>

H3文本推送flexbox元素太宽

1 个答案:

演示