Изменить фоновое изображение при наведении - PullRequest
Новая
       18

Изменить фоновое изображение при наведении

0 голосов
/ 21 мая 2018

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

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

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

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

Ответы [ 4 ]

0 голосов
/ 21 мая 2018

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

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 голосов
/ 21 мая 2018

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

  <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 голосов
/ 21 мая 2018

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>
0 голосов
/ 21 мая 2018

Вы можете использовать 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/

...