如何实现ul中单个列表项hover时仅自身图片opacity变化？

你的问题出在透明度的作用对象错误——你把默认60%的透明度加在了整个.projects列表容器上，hover容器时所有元素会一起变化。要实现单个图片hover仅自身高亮，需把透明度设置在**每个图片（或其父元素li）**上，而非整个容器。

修改后的CSS代码： #

.projects {
    /* 移除此处的opacity设置 */
    margin-left: 320px;
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    position: static;
}
.projects > li {
    height: 540px;
    cursor: pointer;
    position: static;
    list-style-type: none;
}

/* 默认给每个图片设置60%透明度，并添加过渡动画 */
.projects li img {
    opacity: 60%;
    transition: opacity 0.3s;
    object-fit: cover;
    min-width: 300px;
    max-width: 480px;
    height:100%;
    vertical-align: middle;
}

/* hover单个列表项时，仅让其中的图片变为100%透明度 */
.projects li:hover img {
    opacity: 100%;
}

额外规范提示： #

你的HTML中重复使用了id="myLink"，HTML规定id必须唯一，建议改为class避免后续冲突：

<li><a class="project-link" onclick="on();return false;"><img src="images/gb_men.png" width="100%"></a></li>
<li><a class="project-link" onclick="on();return false;"><img src="images/juniors_full.png" width="100%"></a></li>
<li><a class="project-link" onclick="on();return false;"><img src="images/post_worlds_women.png" width="100%"></a></li>

修改后，hover任意单张图片时，仅当前图片会从60%变为100%，其他图片保持原透明度，过渡动画也仅作用于单个元素。

内容的提问来源于stack exchange，提问作者JODream