Css悬停图像转换表现得很奇怪

Question

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

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。

淡入/淡出示例：

• 使用原始背景图片的小提琴：http://jsfiddle.net/9buk14b5/8/
• 小提琴仅使用css创建三角形：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金额需要是它尝试转到底部的元素高度的总和，以及它可能包含的任何填充，边框，边距偏移量。在您的情况下，幻数是132px

padding-bottom: 132px;

以下是这些修改的工作小提琴：http://jsfiddle.net/rv9wbn8b/

编辑：

要显示箭头没有任何效果，只需将padding移到:hover

之外

更新小提琴：http://jsfiddle.net/9buk14b5/4/