html - 使用 css/html 在悬停时更改图像

Question

我在通过悬停效果更改图像时遇到问题。实际上，如果图像是一个在另一个之上，我可以更改图像，但我需要一些不同的东西。
当我将鼠标悬停在另一个图像上时，我需要更改图像。喜欢；

<div id="gallery">
                    <div>
                        <img src="images/team-large.jpg" alt="Img">
                    </div>
                    <ul>
                        <li>
                            <img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler">
                        </li>
                        <li>
                            <img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler">
                        </li>
                        <li>
                            <img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon">
                        </li>
                    </ul>
                </div>

这是我的 HTML 代码，我需要更改

<img src="images/team-large.jpg" alt="Img"> 

当我将鼠标悬停在其他子图像上时出现此图像但我卡住了。

加法；

如何通过 onmouseover 和 onmouseout 命令更改其他图像？

    <div id="gallery">
                        <div>
                            <img src="images/team-large.jpg" id="Img1" name="Img1" class="Img1" alt="Img1" />
                        </div>
                        <ul>
                            <li>
                                <img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler" 
onmouseover="'#Img1'.src='images/elek3.jpg'" onmouseout="'#Img1'.src='images/team-large.jpg'">
                            </li>
                            <li>
                                <img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler" class="thumbnail">
                            </li>
                            <li>
                                <img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon" class="thumbnail">
                            </li>
                        </ul>
                    </div>

我将 ID 名称添加到 Img1 并尝试在将鼠标悬停在“images/elek2.jpg”上时更改图像，但它不起作用。

感谢您的帮助。

Answer 1

您可以改用 css 的 :hover 来更改背景图像。像这样的东西:

div{
  height:200px;
  width:200px;
  background:url("http://placekitten.com/g/200/200");
  }

div:hover{
    background:url("http://placekitten.com/g/200/400");
  }

<div></div>

---

对于您正在寻找的内容，您可能需要子选择器或同级选择器:

.parent{
  height:300px;
  width:300px;
  background: url("http://placekitten.com/g/300/300");
  }

.child{
  height:200px;
  width:200px;
  background: url("http://placekitten.com/g/200/200");
  }

.parent:hover .child{
  background: url("http://placekitten.com/g/200/300");
  }

<div class="parent">
  
  <div class="child"></div>