<a>使用 javascript 扩展 a 的字体大小而不影响其他的填充</a><a></a>

Question

我有以下代码来显示 3 个链接，彼此相邻：-

<div class="col-xl-9 col-lg-9">
    <div class="main-menu  d-none d-lg-block">
        <nav>
            <ul id="navigation">
                <li><a class="movement" href=@customurl style="@Html.IsSelected(actions: "Index", controllers: "Home")">home</a></li>
                <li><a class="movement" style="@Html.IsSelected(actions: "FAQ", controllers: "Home")" href="@(customurl+ "home/faq/")">FAQ</a></li>
                <li><a class="movement" style="@Html.IsSelected(actions: "Contact", controllers: "Home" )" href="@(customurl+ "home/Contact/")">Contact</a></li>
              
            </ul>
        </nav>
    </div>
</div>

我有这个 JavaScript 来扩大悬停链接的字体大小

 $(document).ready(function () {
            //window.location.replace("https://vytalizehealth.com/");
            $(function () {
                
                $(".movement").hover(
                   
                    function () {
                        $(this).css("fontSize", "20px");
                    },
                    function () {
                        $(this).css("fontSize", "16.5px");
                    })
            }); });

但是当文本在 hover >> 上扩展时，左侧和右侧的链接将被填充到左侧和右侧 >> 所以我的问题是如何在不移动其他链接的情况下扩展悬停链接的文本？ 谢谢

Answer 1

请添加一些 CSS 样式。 这是完整的代码。

 $(document).ready(function () { //window.location.replace("https://vytalizehealth.com/"); $(function () { $(".movement").hover( function () { $(this).css("fontSize", "20px"); }, function () { $(this).css("fontSize", "16.5px"); }) }); });

 li { height: 20px; align-content: center; position: relative; } li a { position: absolute; bottom: 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="col-xl-9 col-lg-9"> <div class="main-menu d-none d-lg-block"> <nav> <ul id="navigation"> <li><a class="movement" href=@customurl style="@Html.IsSelected(actions: " Index", controllers: "Home" )">home</a></li> <li><a class="movement" style="@Html.IsSelected(actions: " FAQ", controllers: "Home" )" href="@(customurl+ " home/faq/")">FAQ</a></li> <li><a class="movement" style="@Html.IsSelected(actions: " Contact", controllers: "Home" )" href="@(customurl+ " home/Contact/")">Contact</a></li> </ul> </nav> </div> </div>

此致。