Наведите указатель мыши, чтобы изменить фоновое изображение вместо цвета фона

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

<html> 
    <head> 
     <title>Sample</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <style> 
     body { 
      background: #ccc; 
      transition:0.5s; 
     } 
    </style> 
    <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#div-1").hover(
        function() { 
         $('#top_section').css("background", "#ff9900"); 
        }, 
        function() { 
         $('#top_section').css("background", "#ccc"); 
        } 
       ); 

       $("#div-2").hover(
        function() { 
         $('#top_section').css("background", "red"); 
        }, 
        function() { 
         $('#top_section').css("background", "#ccc"); 
        } 
       ); 

       $("#div-3").hover(
        function() { 
         $('#top_section').css("background", "yellow"); 
        }, 
        function() { 
         $('#top_section').css("background", "#ccc"); 
        } 
       ); 
      }); 
     </script> 
    </head> 
<body> 

    <a id="div-1" href="#"> Orange</a> 
    <a id="div-2" href="#">Red</a> 
    <a id="div-3" href="#">Yellow</a> 
    <div id="top_section" style="height:100px;width:100px;"></div> 
</body> 
</html>

Я перепрофилирования $('#top_section').css("background", "#ff9900"); к $('#top_section').css("background-image", "/images/image1.jpg");, но ничего не происходит, когда я мыши над ссылкой. большое спасибо,

источник

2014-10-17 tony

Вы должны исправить: '.css (" background-image "," /images/image1.jpg ");' to '.css (" background-image "," url ('/ images/image1 .jpg ') ");' – emmanuel

Вы должны окружить адрес изображения с url('...').

$('#top_section').css("background-image", "/images/image1.jpg"); Try изменения в $('#top_section').css("background-image", "url('/images/image1.jpg')");

Или увидеть http://codepen.io/ckuijjer/pen/giABb для примера

источник

2014-10-17 12:10:56 ckuijjer

спасибо. оно работает. Можно ли добавить немного fadein/out к нему, в то время как изменение backgroundimage? – tony

Я думаю, что вы не можете затухать в/из изображения, которое задано с использованием свойства 'background-image' css. Если вы используете регулярный '', вы можете либо с помощью анимации свойства' opacity' css, либо с помощью jQuery 'fadeIn' и' fadeOut'. Поскольку загрузка изображения может занять некоторое время, что может визуально повлиять на затухание, вы можете предварительно загрузить их. – ckuijjer

спасибо за информацию., Также я не хочу, чтобы это влияние на тип изображений, которые я использую ... на фоне изображений, они (графические дизайнеры) используют фон градиента, поэтому, когда он fade - это pixelate, и это выглядит так плохо ... спасибо снова – tony

Поскольку /images/image1.jpg является URL, вы должны сделать Teh следующее:

$('#top_section').css("background-image", "url(/images/image1.jpg)")

источник

2014-10-17 12:10:15

Я предполагаю, что путь не является правильным. Вы можете попробовать этот код:

$('#top_section').css("background-image", "url(../images/image1.jpg)")

источник

2014-10-17 12:14:37

Или избавиться от этого беспорядка и использовать общий селектор родственный CSS в ...

#div-1:hover ~ #top_section { 
    background-image: url(/images/image1.jpg); 
} 

#div-2:hover ~ #top_section { 
    background-image: url(/images/image2.jpg); 
} 
...

источник

2014-10-17 12:24:58 chazsolo

Вы можете даже сократить ваш код друг с другом способом, используя data- атрибут

<a id="div-1" href="#" data-image="/images/image1.jpg"> Orange</a> 
<a id="div-2" href="#" data-image="/images/image2.jpg">Red</a> 
<a id="div-3" href="#" data-image="/images/image3.jpg">Yellow</a> 
<div id="top_section" style="height:100px;width:100px;"></div> 

$(document).ready(function() { 
     $("div").hover(function() { 
      var img = $(this).attr('data-image'); // take the attribute value. 
      $('#top_section').css("background", "url(img)"); 
     }, 
     function() { 
      $('#top_section').css("background", "#ccc"); 
     } 
)}

источник

2014-10-17 12:41:41 tamal3053

Наведите указатель мыши, чтобы изменить фоновое изображение вместо цвета фона

ответ

Смежные вопросы