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>

Answer 2

您可以尝试使用此jQuery代码来更改主图像源

var original = $('#main').attr('src');

$('.thumbnail').mouseover(function()
{
   var source = $(this).attr('src'); // retrieve image source of hovered image
   $('#main').attr('src', source); // update main image source
})
.mouseout(function() {
   $('#main').attr('src', original); // restore original image source
});

jsFiddle code (UPDATED)

在链接的代码段中，我为主图片分配了main个ID，为其他图片分配了thumbnail个分类。这允许通过jQuery访问它们运行时。

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

2 个答案: