Question

非常小学生错误，但我似乎无法让它发挥作用。

我所追求的是当您将鼠标悬停在菜单中的特定列表上时，该菜单中的文字大小会增加，但是此时仅会在您悬停文本时增加大小而不是文本所在的实际“框”。

ul li :hover{
font-size: 30px;
font-family:sans-serif;
}


ul li a{
font-size: 20px;
font-family:sans-serif;
}

感谢任何帮助，谢谢

Answer 1

你需要：hover伪选择器直接在li之后，然后选择a以获得悬停在li上的效果。请注意，我添加了较大尺寸的行高，以允许文本大小增加而不会导致跳转到li的大小。

ul li {
  list-style:none;
  height:30px;
}

ul li a{
  font-size: 20px;
  font-family:sans-serif;
  text-decoration:none;
  line-height:30px;
}

ul li:hover a{
  font-size: 30px;
}

<ul>
  <li><a href = "#">One</a></li>
  <li><a href = "#">Two</a></li>
  <li><a href = "#">Three</a></li>
 </ul>

Answer 2

＆＃13;

.menu {
  border:1px solid #ddd;
  padding:20px;
  display:inline-block;
}

.menu a {
  font-size:14px;
}

.menu a:hover {
  font-size:30px;
}


.menu2 {
  border:1px solid #ddd;
  padding:20px;
  width:200px;
  height:20px;
}

.menu2 a {
  font-size:14px;
}

.menu2 a:hover {
  font-size:30px;
}

＆＃13;

Box will expand
<br />
<br />
<div class="menu">
  <a href="#">test</a>
  <a href="#">test 2</a>
</div>



Box will not expand
<br />
<br />
<div class="menu2">
  <a href="#">test</a>
  <a href="#">test 2</a>
</div>

＆＃13;

Answer 3

这个问题对我来说并不清楚。但我认为你想要达到这样的目的......

ul li{
    border-style:solid;
    border-width:1px;
    width:80px;
}

ul li a:hover{
    font-size: 30px;
    font-family:sans-serif;
}

ul li a{
    font-size: 20px;
    font-family:sans-serif;
}
<ul style="list-style-type:none;">
    <li><a>Item1</a></li>
    <li><a>Item2</a></li>
    <li><a>Item3</a></li>
</ul>

当菜单悬停时，尝试放大菜单文本

3 个答案: