Мне нужно изменить фоновое изображение в div при наведении на ссылку. В настоящее время у меня изображение меняется, когда вы нажимаете на ссылку, но мне оно нужно при наведении курсора, поэтому при нажатии ссылки оно переходит на конкретную веб-страницу.

Это то, что у меня сейчас есть

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

Любые идеи или помощь очень ценятся.

-3
James Cottis 21 Май 2018 в 16:38

4 ответа

Лучший ответ

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 Май 2018 в 14:01

Вы можете использовать mousenter и mouseleave события.

Ваш код будет:

$(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");
    });
});

Вы можете найти более подробную информацию здесь: https://api.jquery.com/mouseenter/

0
Philoupe 21 Май 2018 в 13:47

Для этого можно, например, добавить атрибут данных для дочерних элементов вашего контейнера меню.

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

А потом в свой файл JavaScript добавьте

$("#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 Май 2018 в 13:55

Вот необходимый код:

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 Май 2018 в 13:57