html - 缩放 :hover effect isn't working in css on

Question

简短而简单，我正在尝试使用悬停效果，目前我似乎无法让它在这个 DIV 中工作，我从来没有遇到过这个问题，我也找不到答案我哪里出错了。

.navbar {
      border: solid 0px; background-color: #E6E6E6; padding-top: 15px; padding-
      bottom: 15px;
      position: absolute; top: 230px; left: 320px;
      font-family: sans-serif;
      }
     .shopping,
     .food,
     .hotels,
     .entertainment,
     .guide {
      display: inline;
      padding-right: 90px;
      padding-left: 90px;
      }
      .shopping:hover,
      .food:hover,
      .hotels:hover,
      .entertainment:hover,
      .guide:hover {
       color: yellow;
       -webkit-transform: scale(1.3);
       -ms-transform: scale(1.3);
       transform: scale(1.3);
       }

 <div class="navbar">
      <p class="shopping"><a href="shopping.html">Shopping</a></p>
      <p class="food"><a href="food.html">Food</p>
      <p class="hotels"><a href="hotels.html">Hotels</p>
      <p class="entertainment"><a href="entertainment.html">Entertainment</p>
      <p class="guide"><a href="guide.html">The total NOLA guide.</p>
     </div>
     

奇怪的是，最终显示的是黄色，但我想要缩放部分的悬停不起作用，我无法弄清楚。

Answer 1

将您的代码更改为此。它将以 p 标签内的 anchor 标签为目标。并将 display:inline-block 添加到 anchor 标签以使比例正常工作

    .shopping:hover a,
      .food:hover a,
      .hotels:hover a,
      .entertainment:hover a,
      .guide:hover a{
       color: yellow;
       -webkit-transform: scale(1.3);
       -ms-transform: scale(1.3);
       transform: scale(1.3);
    }

.navbar {
      border: solid 0px; background-color: #E6E6E6; padding-top: 15px; padding-
      bottom: 15px;
      position: absolute; top: 230px; left: 320px;
      font-family: sans-serif;
      }
     .shopping,
     .food,
     .hotels,
     .entertainment,
     .guide {
      display: inline-block;
      padding-right: 90px;
      padding-left: 90px;
      }
      .shopping:hover a,
      .food:hover a,
      .hotels:hover a,
      .entertainment:hover a,
      .guide:hover a{
       color: yellow;
       -webkit-transform: scale(1.3);
       -ms-transform: scale(1.3);
       transform: scale(1.3);
       }
       
       .shopping a,
      .food a,
      .hotels a,
      .entertainment a,
      .guide a{
       background:red;
       display: inline-block; 
      }

<div class="navbar">
      <p class="shopping"><a href="shopping.html">Shopping</a></p>
      <p class="food"><a href="food.html">Food</p>
      <p class="hotels"><a href="hotels.html">Hotels</p>
      <p class="entertainment"><a href="entertainment.html">Entertainment</p>
      <p class="guide"><a href="guide.html">The total NOLA guide.</p>
     </div>