Как масштабировать ссылки при наведении - PullRequest
Новая
       7

Как масштабировать ссылки при наведении

0 голосов
/ 13 марта 2019

Я бы хотел, чтобы некоторые ссылки (список в классе user_options) масштабировались при наведении их мышью. Я новичок в CSS и HTML, так что, я думаю, это довольно простая ошибка, но я все еще не могу заставить ее работать. Заранее спасибо.

Это мой HTML: 

<body>
    <div id="content">
        <div id="header" class="animated bounceInLeft" >
            <div class="user row">
                <div class="col-md-3 user_menu">
                    <div class="user_photo">
                        <img src="AVATAR.jpg" alt="User Profile Photo" class="user_pic"> 
                    </div>
                    <div class="user_options">
                        <ul>
                            <li><a href="#">Rui Nunes  </a></li>
                            <li><a href="#">Edit Profile </a></li>
                            <li><a href="#">Logout </a> </li>
                        </ul>
                    </div>
                </div>

          (etc...............)

            </div>                
        </div>

А это мой код CSS: 

#header .user .user_menu .user_options ul li a {
transition: all .2s ease-in-out;
}
#header .user .user_menu .user_options ul li a:hover {
transform: scaleX(1.3);
}

Ответы [ 2 ]

2 голосов
/ 13 марта 2019

Преобразование не работает на встроенных элементах. Таким образом, вы можете добиться аналогичного эффекта, используя свойство размера шрифта, как показано ниже 

a:hover {
  font-size: 1.3rem;
}
0 голосов
/ 13 марта 2019

Комментарий Усмана правильный.Вот комплексное решение: 

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #header .user .user_menu .user_options ul li a {
            transition: all .2s ease-in-out;
            }
            #header .user .user_menu .user_options ul li a:hover {
            font-size: 1.3rem;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div id="header" class="animated bounceInLeft" >
                <div class="user row">
                    <div class="col-md-3 user_menu">
                        <div class="user_photo">
                            <img src="AVATAR.jpg" alt="User Profile Photo" class="user_pic"> 
                        </div>
                        <div class="user_options">
                            <ul>
                                <li><a href="#">Rui Nunes  </a></li>
                                <li><a href="#">Edit Profile </a></li>
                                <li><a href="#">Logout </a> </li>
                            </ul>
                        </div>
                    </div>

              (etc...............)

                </div>                
            </div>  
        </div>
    </body>
</html>

Но имейте в виду, что это решение нуждается в дополнительных исправлениях.Например, вы присваиваете своим элементам заданную высоту, чтобы содержимое не перемещалось при наведении на ссылки.

Примерно так (очень простое решение): 

#header .user .user_menu .user_options ul li {
    height: 1.5rem;
    }
...