2015-08-06 4 views
0

Я хочу изменить изображение, когда мышь входит и меняет назад, когда мышь уходит. Я не мог справиться с этим часами. Пожалуйста, помогите :)Невозможно изменить изображение, когда мышь входит

Я хочу изменить «yazilogo2.png» на «yazilogo_active.png».

Вот мой код:

<style> 

    #topContainer { 
     background-image:url("yaziylabin_header1.png"); 
     width:100%; 
     background-size:cover; 
     background-position:center; 
     margin-top:51px; 
    } 

    .logo { 
     height:80px; 
    } 

    .logoDiv { 
     margin-top:15px; 
    } 
</style> 
<body> 
    <div class="container contentContainer" style="padding-top:70px;" id="topContainer">  
     <div class="row"> 
      <div class="col-md-6 col-md-offset-3 logoDiv"> 
       <img class="logo center-block" src="yazilogo2.png" /> 
      </div> 
     </div> 
    </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 

    <script> 
     $(".contentContainer").css("min-height", 0.55*($(window).height())); 
    </script> 
</body> 
+0

Просмотрите [Объекты событий DOM] (http://www.w3schools.com/jsref/dom_obj_event.asp) с помощью [exampe] (http://www.w3schools.com/jsref /tryit.asp?filename=tryjsref_onmouseenter) – samuelschaefer

ответ

0

Вы можете изменить атрибут SRC элемента изображения, чтобы изменить изображение. Вы можете использовать hover() метод jQuery для событий mouseenter и mouseleave.

$('.logo').hover(
    // function for mouseenter 
    function() { $(this).attr("src", "yazilogo_active.png");}, 
    // function for mouseleave 
    function() {$(this).attr("src", "yazilogo2.png"); 
}); 
+0

Ты спас день! благодаря ! – burakkesepara

0
$(".logo").hover(
function(){ 
    $(this).attr("src","pic1.png"); 
}, 
function(){ 
    $(this).attr("src","pic2.png"); 
}); 

Вы можете узнать о. hover() here.

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