使项目变大而不影响html中的其他项目。

Question

我被委托编辑 https:/nosociety.net 我需要让WIKI FORUMS和SHOP在悬停时变大，而不互相碰撞，怎么做？

目前的代码。

css: .items { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-preferred-size: 100px; flex-basis: 100px; padding: 18px 0 10px 0; } HTML:
<div class="items">
    <a href="wiki" class="item forums">
        <div>

            <p class="subtitle">search the</p>
            <p style="color:#98212a" class="title">ᴡɪᴋɪ</p>
        </div>
    </a>

    <a href="forums" class="item store">
        <div>
            <p class="subtitle">visit the</p>
            <p style="color:#98212a" class="title">ғᴏʀᴜᴍs</p>
        </div>
    </a>

    <a href="shop" class="item vote">
        <div>
            <p class="subtitle">browse the</p>
            <p style="color:#98212a" class="title">sʜᴏᴘ</p>
        </div>

    </a>

</div>
JS
<script>
    $(document).ready(function() {
        $('a').on('mouseenter', function() {
                $(this).animate({
                    width: "+=10",
                    height: "+=20"
                });
            })
            .on('mouseleave', function() {
                $(this).animate({
                    width: "-=10",
                    height: "-=20"
                });
            })
    })
</script>

Answer 1

你不需要JavaScript来做这个。

试试这样的代码 CSS:

a.item:hover .title {
  transform: scale(1.2);
  transform-origin: left;