一旦停止將滑鼠懸停在影片上，是否有更好的解決方案來反轉影片？

一旦我停止懸停在它上面，我想讓它慢慢回落。該代碼有效，但每當重新加載頁面時，影片都會運行一次。雖然這不是一個大問題，但我想知道是否有更好的解決方案？我這里有一些 html 和 css 示例來幫助解決問題。

<div class="AGS">
            <div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;"> 
                <a>PLACEHOLDER</a></div>
            <div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
                <a>PLACEHOLDER</a></div>
            <div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
                <a>PLACEHOLDER</a></div>
            <div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
                <a>PLACEHOLDER</a></div>
            <div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
                <a>PLACEHOLDER</a></div>
            <div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
                <a>PLACEHOLDER</a></div>
            <div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
                <a>PLACEHOLDER</a></div>
            <div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
                <a>PLACEHOLDER</a></div>
            <div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
                <a>PLACEHOLDER</a></div>
            <div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
                <a>PLACEHOLDER</a></div>
    </div>

然后是css

.a {
        display: block;
        border: 5px solid black;
        margin:-4.4444444444px 0 0 0;
        padding: 1px;
        text-align: left;
        background-color: rgba(0,0,0,0.3);
        color: black;
        text-shadow: 0px 0px 0px black;
        place-items: left;
        animation-name: ano;
        animation-duration: .1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-direction: alternate;
        animation-timing-function: ease-in; 
    }
.a:hover {
        color: black;
        background-color: rgba(255,255,255,0.1);
        animation-name: an;
        animation-duration: .1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-direction: alternate;
        animation-timing-function: ease-in;
        }
        @keyframes an {
            from {
                margin:-4.4444444444px 0 0 0;
            }
            to {
                margin: -4.4444444444px -5px 0 0px;
                border-left: 10px solid black;
            }
        }
        @keyframes ano {
            from {
                margin: -4.4444444444px -5px 0 0px;
                border-left: 10px solid black;
            }
            to {
                margin:-4.4444444444px 0 0 0;
                border-left: 5px solid black;
            }
        }
        .AGS {
            padding: 0px 0px 0px 0px;
            width: 250px;
            margin: 0px 0px 0px 0px;
        }

uj5u.com熱心網友回復：

如果您只是:hover在兩個狀態之間制作影片，則可以使用簡單transition的而不是keyframes.

.a {
  display: block;
  border: 5px solid black;
  margin: -4.4444444444px 0 0 0;
  padding: 1px;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.3);
  color: black;
  text-shadow: 0px 0px 0px black;
  place-items: left;
  transition: .1s ease-in;
}

.a:hover {
  color: black;
  background-color: rgba(255, 255, 255, 0.1);
  margin: -4.4444444444px -5px 0 0px;
  border-left: 10px solid black;
}

.AGS {
  padding: 0px 0px 0px 0px;
  width: 250px;
  margin: 0px 0px 0px 0px;
}

<div class="AGS">
  <div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
</div>

uj5u.com熱心網友回復：

只需添加.class:not(:hover). 所以你可以設定如果元素沒有懸停應該做什么。

標籤：css 动画

上一篇：是否可以使用'LIKE'和'=？在同一個SQL查詢中？

下一篇：將分頁器指示器影片化為按鈕