pasar - Cambiar las imágenes en hover con css/html

efectos hover para imagenes en html

Question

Tengo un problema con el cambio de imágenes por efecto de desplazamiento. De hecho, puedo cambiar la imagen si las imágenes son una encima de la otra, pero necesito algo diferente.
Necesito cambiar las imágenes cuando paso el mouse sobre otra imagen. Me gusta;

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

Este es mi código HTML y necesito cambiar

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

esta imagen cuando paso el ratón sobre las otras imágenes secundarias, pero estoy atascado.

Adición;

¿Cómo puedo cambiar otras imágenes por los comandos onmouseover y 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>

Agregué el nombre de ID a Img1 e intenté cambiar la imagen cuando coloqué el mouse sobre ''images / elek2.jpg'' pero no funcionó.

Gracias por la ayuda.

Answer 1

Puede probar este código jQuery para cambiar la fuente de la imagen principal

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
});

código jsFiddle (ACTUALIZADO)

En el fragmento vinculado, he asignado una identificación principal a la imagen principal y una clase de thumbnail a otras imágenes. Esto les permite acceder al tiempo de ejecución a través de jQuery.

Answer 2

Puedes cambiar la imagen de fondo usando css''s :hover lugar. Algo como:

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>

Para lo que está buscando, es posible que necesite el selector hijo o hermano:

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