使用css / html更改悬停图像 [英] Changing images on hover with css/html

问题描述

通过悬停效果改变图像的问题。其实我可以改变形象，如果图像是一个在另一个上面，但我需要不同的东西。

当我将鼠标悬停在另一张图片上时，我需要更改这些图片。喜欢;

 < div id =gallery> 
< div> 
< img src =images / team-large.jpgalt =Img> 
< / div> 
< ul> 
< li> 
 < / li> 
< li> 
< img src =images / su.jpgalt =Imgtitle =SualtıAkustik Sistemler> 
< / li> 
< li> 
 < / li> 
< / ul> 
< / div> 
  

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

 < img src =images / team-large.jpgalt =Img> 
  

当我将鼠标悬停在其他子图像上时，我被卡住了。

b
$ b

加法

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

 < div id =gallery> 
< div> 
< img src =images / team-large.jpgid =Img1name =Img1class =Img1alt =Img1/> 
< / div> 
< ul> 
< li> 
  onmouseover =''＃Img1'.src ='images / elek3.jpg'的onmouseout =  '＃Img1'.src =' 图像/团队large.jpg' > 
< / li> 
< li> 
 < / li> 
< li> 
 < / li> 
< / ul> 
< / div> 
  

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

感谢您的帮助。 您可以改变背景图片使用css的：hover 代替。例如：

div {height：200px;宽度：200像素;背景：URL（ http://placekitten.com/g/200/200）; } div：hover {background：url（http://placekitten.com/g/200/400）; }

< div>< / div>

您可能需要孩子或兄弟姐妹选择器：

.parent {height：300px;宽度：300像素;背景：url（http://placekitten.com/g/300/300）; } .child {height：200px;宽度：200像素;背景：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>  

I have a problem with changing images by hover effect. Actually I can change image if the images are one on the top of the other but I need something different.
I need to change the images when I mouse over another image. Like;



<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>

This is my HTML Code and I need to change

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

this image when I mouse over the other sub images but I'm stuck.

Addition;

How can I change other images by onmouseover and onmouseout commands??

    <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>

I added the ID name to Img1 and tried to change the image when I mouse over 'images/elek2.jpg' but it doesn't work.

Thanks for help.

解决方案

You could alter the background image using css's :hover instead. Something like:

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>

---

For what you're looking for, you might need the child or sibling selector:

.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>

这篇关于使用css / html更改悬停图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！