当鼠标悬停它们时，我想建立一些链接（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);
}
变换不适用于内联元素。因此，您可以通过使用如下的字体大小属性来实现类似的效果
a:hover {
font-size: 1.3rem;
}
乌斯曼的评论是正确的。这是捆绑的解决方案：
<!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;
}