Question

简短而简单，我试图使用悬停效果，而我现在似乎无法让它在这个DIV中工作而且我从来没有来过解决这个问题，我无法找出出错的地方。

＆＃13;

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

＆＃13;

<!-- Enhanced Ecommerce Data Layer through Google Tag Manager -->
<script>
dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': rtCONFIRMATIONNUMBER_0,            
        'revenue': rtTOTALCOST,        
        'tax':rtTAX_0,
      },
      'products': [{                           
        'name': rtPROPERTYNAME+'-'+rtROOMTYPE_0,    
        'id': rtCONFIRMATIONNUMBER_0,
        'price': rtTOTALCOST,
        'quantity': 1
       }]
    }
  }
},{
    'event': 'purchase'
});
</script>
<!-- END Enhanced Ecommerce Data Layer through Google Tag Manager -->

＆＃13;

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

Answer 1

将您的代码更改为此。它将定位p标记内的锚标记。并将display:inline-block添加到锚标记以使标尺生效

    .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);
    }

＆＃13;

.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; 
      }

＆＃13;

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

＆＃13;

Answer 2

我认为你的做法是错误的。您可以使用font-size:来实现同一目标。

＆＃13;

p:hover {
  font-size: 20px;
}

＆＃13;

<p>Shopping</p>

＆＃13;

在HTML文字上使用scale有时会让事情变得混乱，而且最好不要将其用于文字。

使用您的代码，这将是：

＆＃13;

.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 {
  padding-right: 90px;
  padding-left: 90px;
  height: 20px;
}
.grow:hover > a {
  color: yellow;
  font-size: 20px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="navbar">
    <div class="shopping grow"><a href="shopping.html">Shopping</a></div>
    <div class="food grow"><a href="food.html">Food</a></div>
    <div class="hotels grow"><a href="hotels.html">Hotels</a></div>
    <div class="entertainment grow"><a href="entertainment.html">Entertainment</a></div>
    <div class="guide grow"><a href="guide.html">The total NOLA guide.</a></div>
  </div>
</body>
</html>

＆＃13;

Answer 3

我会将嵌套切换为外部有<a>标记，然后内部使用<span>标记。

＆＃13;

a.f > span { 
  font-size: 1em;
  color: grey;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
}

a.f > span:hover { 
    font-size: 22em;
    color: brown;
}

＆＃13;

<a href="food.html" class="f"><span class="f">Food</span></a>

＆＃13;

缩放：悬停效果不在<p>的css中工作

3 个答案: