Question

当鼠标悬停它们时，我想进行一些链接（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);
}

Answer 1

转换不适用于嵌入式元素。因此，您可以通过使用以下font size属性来实现类似的效果

a:hover {
  font-size: 1.3rem;
}

Answer 2

乌斯曼的评论是正确的。这是捆绑的解决方案：

PostgresConnectionPool.pool.Wait

但是请注意，此解决方案需要更多修复。例如。您可以为元素指定预定义的高度，以便将内容悬停在链接上时内容本身不会移动。

类似这样的东西（非常基本的解决方案）：

<!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>

悬停时如何缩放链接

2 个答案: