cssのfilter(item1:hover)について質問です。6種類の画像の入れ替え画面でカーソルが重なった場合に画像がカラー色になるように設定したのですが、初回のみは実行するのですが2回目から1枚目の画像がカーソルが重ねってもグレー色のままです。間違っている箇所を教えて下さい。\u0026lt;style\u0026gt;#main { float: right; width: 50%; margin-top: 0px; margin-right: 20px; margin-left: 50px; margin-bottom: 20px;}.slidebox { height: 235px; width: 394px; overflow: hidden; position: relative;}.imgs{ filter: grayscale(99%);}.item1:hover{ filter: grayscale(10%);}.item1 { opacity: 0; width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; filter: grayscale(99%); -webkit-animation: anime 60s 0s infinite; animation: anime 60s 0s infinite;}.item1:nth-of-type(2) { -webkit-animation-delay: 10s; animation-delay: 10s;}.item1:nth-of-type(3) { -webkit-animation-delay: 20s; animation-delay: 20s;}.item1:nth-of-type(4) { -webkit-animation-delay: 30s; animation-delay: 30s;}.item1:nth-of-type(5) { -webkit-animation-delay: 40s; animation-delay: 40s;}.item1:nth-of-type(6) { -webkit-animation-delay: 50s; animation-delay: 50s;}@keyframes anime { /* 100%÷画像枚数を中心に表示するように */ 0% {opacity: 0} 10% {opacity: 1} 20% {opacity: 1} 25% {opacity : 0; z-index: 9;} 100% {opacity: 0}}\u0026lt;/style\u0026gt;\u0026lt;/head\u0026gt;\u0026lt;body\u0026gt;\u0026lt;div id=\u0026quot;main\u0026quot;\u0026gt;\u0026lt;div class=\u0026quot;slidebox\u0026quot;\u0026gt; \u0026lt;img class=\u0026quot;item1\u0026quot; src=\u0026quot;image/main_pic2.jpg\u0026quot; alt=\u0026quot;\u0026quot;\u0026gt; \u0026lt;img class=\u0026quot;item1\u0026quot; src=\u0026quot;image/main_pic3.jpg\u0026quot; alt=\u0026quot;\u0026quot;\u0026gt; \u0026lt;img class=\u0026quot;item1\u0026quot; src=\u0026quot;image/main_pic4.jpg\u0026quot; alt=\u0026quot;\u0026quot;\u0026gt; \u0026lt;img class=\u0026quot;item1\u0026quot; src=\u0026quot;image/main_pic5.jpg\u0026quot; alt=\u0026quot;\u0026quot;\u0026gt; \u0026lt;img class=\u0026quot;item1\u0026quot; src=\u0026quot;image/main_pic8.jpg\u0026quot; alt=\u0026quot;\u0026quot;\u0026gt; \u0026lt;img class=\u0026quot;item1\u0026quot; src=\u0026quot;image/main_pic7.jpg\u0026quot; alt=\u0026quot;\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/body\u0026gt;\u0026lt;/html\u0026gt;

1件の回答

回答を書く

1277644

2026-03-27 03:40

+ フォロー

choさん



\u0026gt;・・・・初回のみは実行するのですが2回目から1枚目の画像がカーソルが重ねってもグレー色のままです。・・・・・



こうしたいのではないの。↓ (修正箇所のみ記載)



@keyframes anime { /* 100%÷画像枚数を中心に表示するように */

0% {opacity: 0; z-index: 9; }

10% {opacity: 1}

20% {opacity: 1}

25% {opacity : 0; }

100% {opacity: 0; z-index: 1;}

}

うったえる有益だ(0シェアするブックマークする

関連質問

Copyright © 2026 AQ188.com All Rights Reserved.

博識 著作権所有