Necesito cambiar una imagen de fondo en un div en un vuelo estacionario en un enlace. Actualmente tengo la imagen que cambia cuando haces clic en el enlace, pero la necesito al pasar el cursor para que cuando haga clic en el enlace vaya a una página web específica.

Esto es lo que tengo actualmente

http://www.twist-dev.co.uk/hover/

Cualquier idea o ayuda muy apreciada.

-3
James Cottis 21 may. 2018 a las 16:38

4 respuestas

La mejor respuesta

js

$(".list li a").hover( function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
    var value=$(this).attr('data-src');
    $(".image-holder img").attr("src", value);
});

css

.image-holder {
      float: left;
      margin-right: 100px;
      display: block;
      width: 350px;
      height: 500px;
      background-color: grey;
    }

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-top: 200px;  
}

a {
  color: red;
  margin-bottom: 20px;
  text-decoration: none;    
  display: inline-block;    
  text-transform: uppercase;
  font-family: Arial, sans-serif;
}

html

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="image-holder">
      <img src="http://placehold.it/350x150">
    </div>
    <ul class="list">
      <li><a href="#" data-src="http://placehold.it/350x150">Link 1</a></li>
      <li><a href="#" data-src="http://placehold.it/350x250">Link 2</a></li>
      <li><a href="#" data-src="http://placehold.it/350x350">Link 3</a></li>
    </ul>
1
21 may. 2018 a las 14:01

Puede usar los eventos mousenter y mouseleave.

Tu código sería:

$(document).ready(function() {
    $("#cf7_controls > span").mouseenter(function() {
        $("#cf7 img").removeClass("opaque");

        var newImage = $(this).index();

        $("#cf7 img").eq(newImage).addClass("opaque");

        $("#cf7_controls span").removeClass("selected");
        $(this).addClass("selected");
    });
});

Puedes encontrar más detalles aquí: https://api.jquery.com/mouseenter/

0
Philoupe 21 may. 2018 a las 13:47

Aquí está el código requerido:

p#cf7_controls {
  text-align:center;
}
#cf7_controls span {
  padding-right:2em;
  cursor:pointer;
}
#cf7 {
  position:relative;
  height:519px;
  width:548px;
  margin:0 auto 10px;
}
#cf7 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

#cf7 img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}
    <body>
    
    <div id="cf7" class="shadow">
      <img class='opaque' src="https://www.twist-dev.co.uk/hover/base.png"/>
      <img src="https://www.twist-dev.co.uk/hover/https://www.twist-dev.co.uk/hover/cylinder.png" alt='1'/>
      <img src="https://www.twist-dev.co.uk/hover/crankcase.png" alt='2'/>
      <img src="https://www.twist-dev.co.uk/hover/cooling.png" alt='3'/>
      <img src="https://www.twist-dev.co.uk/hover/intervals.png" alt='4'/>
    </div>
    <p id="cf7_controls">
      <span class="selected"></span>
      <span>CYLINDER HEAD & BARRELS</span>
      <span>CRANKCASES</span>
      <span>COOLING SYSTEM</span>
      <span>ENGINE INTERNALS</span>
    </p>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    	$(document).ready(function() {
      $("#cf7_controls span").on('mouseover', function() {
        $("#cf7 img").removeClass("opaque");
    
        var newImage = $(this).index();
    
        $("#cf7 img").eq(newImage).addClass("opaque");
    
        $("#cf7_controls span").removeClass("selected");
        $(this).addClass("selected");
      });
    });
    </script>
    
    </body>
0
user9090230user9090230 21 may. 2018 a las 13:57

Una forma de lograrlo sería, por ejemplo, agregar un atributo de datos a los elementos secundarios de su contenedor de menú

  <p id="cf7_controls">
  <span class="selected"></span>
  <span data-image="cylinder">CYLINDER HEAD &amp; BARRELS</span>
  <span data-image="crankcase">CRANKCASES</span>
  <span data-image="cooling">COOLING SYSTEM</span>
  <span data-image="intervals">ENGINE INTERNALS</span>
  </p>

Y luego en su archivo javascript agregue

$("#cf7_controls span").hover(function(){

//Find the image wich refers to the hovered link
var image = $(this).data("image");
$( "img[src^="+image+"]").css({ opacity: 1 });

})

0
Mamadou 21 may. 2018 a las 13:55