Home>

The hover works when the phone is about the size of the smartphone, but the hover does not work when the screen width increases.





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;
}
}

  • Answer # 1

    As far as the code is copied and reproduced, the hover seems to work even when the window width is maximum.

    The code "not hovering" may be caused by a code other than those listed here.

    Although some behavior was strange
    Ifdisplay: inline-block;inimg: hoveris deleted, the behavior is almost the same as when using smartphone size.
    * Behavior depends on the surrounding code.