Question

我正在尝试使用CSS3过渡使:hover类淡入淡出，而不是直接消失。

我已经尝试将transition应用于元素的CSS以及:hover css类，但都不起作用。我哪里错了？我应该如何正确申请transition？

#menu-main-menu a {font-size:30px;transition: zoom 5s ease;transition: color 5s ease;}
#menu-main-menu a:hover {color:#ed918b;zoom:85%;}

Answer 1

实际上第二个transition覆盖了第一个is not a animatable。你应该按如下方式组合它们：

transition: property1 5s ease, property2 5s ease;

但是，zoom Example Here属性。这是IE的目的，它有一个有限的浏览器支持。如果要更改元素的比例，可以使用transform: scale()表示法。

因此声明将是：

#menu-main-menu a {
    transition: transform 5s ease, color 5s ease;
}

由于简洁，

供应商前缀被忽略 - {{3}} 。

要回答最初的问题，在大多数情况下，最好在主选择器上应用transition而不是:hover状态。

Answer 2

我创建了一个快速示例来向您解释：

div.nav1 > a{
  display:inline-block;
  padding-left:0px;
  color:blue;
  transition: all 0.2s;
  
  }

div.nav1 > a:hover{
  display:inline-block;
  padding-left:10px;
  color:red;
  
  
  }

div.nav2 > a{
  display:inline-block;
  padding-left:0px;
  color:blue;
  
  }

div.nav2 > a:hover{
  display:inline-block;
  padding-left:10px;
  color:red;
  transition: all 0.2s;  
  
  }

div.nav3 > a{
  display:inline-block;
  padding-left:0px;
  color:blue;
  transition: all 2s;  
  
  }

div.nav3 > a:hover{
  display:inline-block;
  padding-left:10px;
  color:red;
  transition: all 0.2s;  
  
  }

<div class="nav1">
<a href="a_link.html">Home</a><br />
<a href="a_link.html">About</a><br />
<a href="a_link.html">Products</a><br />
<a href="a_link.html">Contact</a><br />
</div><br />

<div class="nav2">
<a href="a_link.html">Home</a><br />
<a href="a_link.html">About</a><br />
<a href="a_link.html">Products</a><br />
<a href="a_link.html">Contact</a><br />
</div><br />

<div class="nav3">
<a href="a_link.html">Home</a><br />
<a href="a_link.html">About</a><br />
<a href="a_link.html">Products</a><br />
<a href="a_link.html">Contact</a><br />
</div>

希望这有帮助！

Answer 3

......上面提到的内容，但放置它的正确位置是在元素中而不是在：悬停状态。

将其置于悬停状态时，会在悬停在元素上时触发平滑过渡，但是悬停将是突然的，因为转换不会存在。

我应该在悬停元素或主元素上应用CSS3过渡的位置？

3 个答案: