html - 如何为放置在父容器中的图像添加悬停效果

Question

如何使用 CSS 在鼠标悬停在链接 Text 上后向 img 添加悬停效果？

<div class="myTextContainer">
    <p>
        <a href="#">
            <img height="128" width="128" title="icon1" alt="icon1" src="icon1.png" ">
        </a>
    </p>
    <h2>
        <a href="#">Text</a>
    </h2>
</div>

Answer 1

尝试添加一些 JavaScript。在我的例子中，我添加了 html 属性 onmouseover 和 onmouseleave 来调用 javascript 函数。 fun1 悬停时 fun 2 离开时。我在我的图像上添加了 id hover，我在每个函数上都说要获取 id hover 的元素，这是我的图像并更改 backgroundColor='blue'。悬停时，我将其设置为蓝色，离开时我将其设置为红色。您可以通过执行 style.src='here/put/the/image/source/img.png' 更改其他元素，例如 src，并在悬停或离开时添加不同的 src。如果您需要更多信息，请发表评论。这有帮助吗？

function fun1(){
  document.getElementById("hover").style.backgroundColor='blue';
}
function fun2(){
  document.getElementById("hover").style.backgroundColor='red';
}

#hover{
background-color:red;
}

<div class="myTextContainer">
    
        <a href="#">
            <img id="hover" height="128" width="128" title="icon1" alt="icon1" src="icon1.png">
        </a>
    
    <h2>
        <a href="#" onmouseover="fun1()" onmouseleave="fun2()">Text</a>
    </h2>
</div>

-------- 或者在没有脚本标签或文件的情况下执行此操作--------

#hover{
background-color:red;
}

<div class="myTextContainer">
    <p>
        <a href="#">
            <img id="hover" height="128" width="128" title="icon1" alt="icon1" src="icon1.png">
        </a>
    </p>
    <h2>
        <a href="#" onmouseover="document.getElementById('hover').style.backgroundColor='blue';" onmouseleave="document.getElementById('hover').style.backgroundColor='red';">Text</a>
    </h2>
</div>