Changing images on hover with css/html

问题

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.

回答1:

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>

回答2:

You may try this jQuery code to change source of main image

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)

In the linked snippet, I've assigned a main id to main image and a thumbnail class to other images. This allows to access them runtime via jQuery.

来源：https://stackoverflow.com/questions/27961873/changing-images-on-hover-with-css-html

标签

html

css

image

hover

mousehover