我正在为自己制作一个平面设计作品集，但我的编码能力不是最好的。我试图用我的项目做一个列表，除了悬停功能，一切都很好。图像的默认状态设置为60%，我希望单个图像在悬停时更改为100%，但由于某种原因，当我悬停在任何一个图像上时，所有图像都会更改。
HTML代码

<!-------PROJECTS----->
    <ul class="projects">
            <li><a id="myLink" onclick="on();return false;"><img src="images/gb_men.png" width= "100%"></a></li>
            <li><a id="myLink" onclick="on();return false;"><img src="images/juniors_full.png" width= "100%"></a></li>
            <li><a id="myLink" onclick="on();return false;"><img src="images/post_worlds_women.png" width= "100%"></a></li>
            <li><img src="images/Cheques.jpg" width= "100%"></li>
            <li><img src="images/WP_Banner.jpg" width= "100%"></li>
            <li><img src="images/GL_Banner.jpg" width= "100%"></li>
</ul>

CSS代码

.projects {
    opacity: 60%;
    margin-left: 320px;
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    position: static;
}
.projects:hover {
    opacity: 100%;
    transition: 0.3s;
}
.projects > li {
    height: 540px;
    cursor: pointer;
    position: static;
    content: "";
    list-style-type: none;
}

.projects li img {
    object-fit: cover;
        min-width: 300px;
        max-width: 480px;
        height:100%;
    vertical-align: middle;
}