如何在悬停

Question

我能够应用background-image来锚定:hover，现在希望它能够同时进行动画处理。我怎么可能实现呢？

.nav-content ul li a {
    display: inline-block;
    padding: 5px 0;
    text-decoration: none;
    color: #fff;
}

.nav-content ul li a:hover {
    text-decoration: none;
    background: url('dotted.gif') bottom repeat-x;
}

  

澄清我的问题：

我想要实现的是，在悬停时不断在X轴上动画下划线dotted.gif图像。到目前为止它只是出现在悬停

Answer 1

您可以使用transition和opacity进行淡入/淡出，也可以使animation和background-position进行沿X轴移动的点，{{3 }}：

.link {
    position: relative;
    display: inline-block;
    padding: 5px 0;
    text-decoration: none;
    color: #000;
}

    .link:after {
        content: ''; 
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: url('http://oi62.tinypic.com/256wzvb.jpg');
        background-size: 120px 120px;
        opacity: 0;
        -webkit-transition: opacity 0.2s;
        transition: opacity 0.2s;
        -webkit-animation: x-move 5s linear infinite; 
        animation: x-move 5s linear infinite;
    }

    .link:hover {
        text-decoration: none;
    }

        .link:hover:after {
            opacity: 1;
        }

@-webkit-keyframes x-move {
    0% { background-position: 0 0; }
    100% { background-position: 120px 0; }
}

@keyframes x-move {
    0% { background-position: 0 0; }
    100% { background-position: 120px 0; }
}

<a class="link" href="#">Test link</a>

Answer 2

这样的东西？

.link {
    position: relative;
    display: inline-block;
    padding: 5px 0;
    text-decoration: none;
    color: #fff;
}

.link:after {
    content: ''; 
    height: 1px;
    display: block;
    border-bottom: 1px dotted #e0d16c;
    width: 0;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
}

.link:hover {
    text-decoration: none;
}

.link:hover:after {
    width: 100%;
}

<div style="background: black; width: 200px; height: 100px; padding: 10px;">
    <a class="link" href="#">Test link</a>
</div>