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

Question

因此，每当您将鼠标悬停在图像上时，我都会尝试制作一个简单的动画（仅更改不透明度）。问题是动画不仅应用于图像，还应用于整行。
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%;}

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

Answer 1

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

CSS ~ Hover animation affects the whole page row ISSUE