html - Css hover image transition 行为怪异

Question

我一直在试图弄清楚为什么悬停图像从左到底部飞行并具有过渡效果，即使悬停图像仅设置为 padding-bottom。我只希望悬停图像在悬停时显示在菜单底部。

http://jsfiddle.net/9buk14b5/1/

<header>
    <div class="row">
      <div class="large-12 columns">
        <nav id="primary_nav">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Get a Quote</a></li>
            <li><a href="#">FAQ</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

#primary_nav ul{
    display: inline;
    list-style-type: none;
    li{
        float: left;
        padding: 15px 50px 15px 0;
        a{
        color:#ccc;
            &:hover{
                color:#fff;
                background: url('../images/hover.png') no-repeat;
                background-position: center center;
                width: 22px;
                height: 19px;
                padding-bottom: 35px;
                -webkit-transition: 0.8s all ease-out;
                -o-transition: 0.8s all ease-out;
                -moz-transition: 0.8s all ease-out;
                transition: 0.8s all ease-out;
            }
        }
    }
}

Answer 1

使用:after与 :hover 结合的伪元素.

li {
    position: relative;
    float: left;
    padding: 15px 50px 15px 0;
    
    a {
        padding-bottom: 35px;
        
        &:after {
            position: absolute;
            content: '';
            bottom: -3px;
            left: 25%;
            display:block;
            margin: 0 -11px;
            background: url('http://i60.tinypic.com/35a7xvs.png') no-repeat 0;
            width: 22px;
            height: 19px;
            opacity: 0;
            transition: opacity 500ms linear;
            -webkit-transition: opacity 200ms linear;
            -moz-transition: opacity 200ms linear;
            -ms-transition: opacity 200ms linear;
            -o-transition: opacity 200ms linear;
        }
        
        &:hover {
            &:after {
            opacity: 1;
            }
        }
    }
}

添加 background-image到 :after伪元素允许您将样式设置为在其父元素 <a> 时应用悬停。在这种情况下，我们将伪元素设置为 opacity:0;最初和opacity:1; , 然后我们简单地设置 transition-property观看opacity .

淡入/淡出示例:

• Fiddle 使用原始背景图片:http://jsfiddle.net/9buk14b5/8/
• Fiddle 仅使用 css 创建三 Angular 形:http://jsfiddle.net/9buk14b5/7/

---

一些事情:

通过告诉 transition 修复奇怪的动画行为为哪个属性设置动画。在您的代码中，它设置为 all .将其更改为 padding .我还将计时功能更改为 ease-in-out .

-webkit-transition: 0.8s padding ease-in-out;
-o-transition: 0.8s padding ease-in-out;
-moz-transition: 0.8s padding ease-in-out;
transition: 0.8s padding ease-in-out;

其次，你的padding-bottom amount 需要是它试图到达底部的元素的高度，以及它可能包含的任何填充、边框、边距偏移量的总和。在你的例子中，魔数(Magic Number)是 132px

padding-bottom: 132px;

这是经过这些修改后的工作 fiddle :http://jsfiddle.net/rv9wbn8b/

编辑:

要显示没有任何效果的箭头，只需移动 padding在:hover之外

更新 fiddle : http://jsfiddle.net/9buk14b5/4/