CSS ~ 悬停动画影响整个页面行 ISSUE答案

【问题标题】：CSS ~ Hover animation affects the whole page row ISSUECSS ~ 悬停动画影响整个页面行 ISSUE
【发布时间】：2021-08-23 08:48:31
【问题描述】：

因此，每当您将鼠标悬停在图像上时，我都会尝试制作一个简单的动画（仅更改不透明度）。问题是动画不仅应用于图像，而且应用于整行。
HTML：

<header>
<div class="logo">
    <img src="images/mofowhite.png" alt="Nik Moder Photography Logo" height="40px">
</div>

CSS：

.logo {
padding-left: 15px;
padding-top: 5px;
opacity: 60%;
transition: 0.2s;}

.logo:hover {
transition: 0.2s;
opacity: 100%;}

图片： 红色=光标位置 蓝色=图像受影响

【问题讨论】：

【解决方案1】：

回答： Djoezz 只需更直接地定位（使用“.logo img”和“.logo img:hover”）

【讨论】：