画面幅を大きくした時は画像のホバーが効かなくなるのを解決したい

Question

スマホ幅ぐらいの大きさの時はホバーが効くのですが、画面幅が大きくなるとホバーが効かなくなります。

<div class="img"> <img src="projects-ktorides-winery-papachristou-01.jpg"> <img src="projects-ktorides-winery-papachristou-02.jpg"> <img src="projects-ktorides-winery-papachristou-03.jpg"> </div>

img {
width: 100%;

padding: 10px 10px;
}

img:hover {
cursor: cell;
border: 1px solid #fff;
padding: 10px 10px;
opacity: 0.4;
transition: .6s;
display: inline-block;
background: none
}
@media(min-width:1024px) {

img {
width: 80%;
height: 900px;
margin: 0 auto;
text-align: center;
display: block
}

img:hover　{
opacity: 0.4;
}
}

Comments

[kyoya0819]

具体的にどのくらいの幅ですか？

[退会済みユーザー]

幅は６２０px以上の時になると効かなくなります。

Answer 1

コードをコピーして再現して見た限り、ウィンドウ幅最大時もホバーは動作しているようです。

「ホバーが効かなく」というのは、ここに記載した以外のコードが原因となっているかもしれません。

挙動が変な部分はありましたが
img:hover の中の display: inline-block; を消せば、ほぼスマホサイズの時と同じ様な挙動になりました。
※挙動もまわりのコードに依存すると思うので要らぬおせっかいだと思いますが