Блог

Главная - Вопросы по программированию - Увеличение размера шрифта с помощью javascript без изменения заполнения другого

Увеличение размера шрифта с помощью javascript без изменения заполнения другого

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть следующий код, чтобы показать 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");
                    })
            }); });

но когда текст расширяется при наведении >> тогда ссылки с левой и правой стороны будут дополнены слева и справа >> поэтому мой вопрос в том, как я могу расширить текст наведенной ссылки, не перемещая другие ссылки?
Спасибо

Комментарии:

1. Вместо изменения размера шрифта, почему бы не применить transform:scale(1.2) , например, a?

2. @Paulie_D не могли бы вы подробнее рассказать об этом?

3. codepen.io/Paulie-D/pen/OJRrwzg

4. @Paulie_D ваш подход сработал для меня, спасибо

Ответ №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>

С наилучшими пожеланиями.

Метки: