jquery наведение не возвращается на 'mouseleave' - PullRequest
Новая
       0

jquery наведение не возвращается на 'mouseleave'

0 голосов
/ 18 июня 2020

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

jQuery('#rollover1').on('mouseenter', function(){
   jQuery('#container').css('background-image', 'url(IMAGE URL)');
});
jQuery('#rollover1').on('mouseleave', function(){
  jQuery('#container').css('background-color', '#222222');
});

Ответы [ 4 ]

1 голос
/ 18 июня 2020

Вы нигде не заявили, что хотите удалить изображение. Поэтому, если вы хотите удалить изображение, вам нужно указать его явно. 

jQuery('#rollover1').on('mouseenter', () => {
jQuery('#container').css('background-image', 'url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/157px-Google_%22G%22_Logo.svg.png")');
}).on('mouseleave', () => {
jQuery('#container').css('background-image','none').css('background-color', '#222222');
});
1 голос
/ 18 июня 2020

вы должны указать значение background-image, чтобы переопределить его, background-color - это совершенно другой атрибут CSS, вот рабочий фрагмент: 

jQuery('#rollover1').on('mouseenter', function(){
   jQuery('#container').css('background-image', 'url(https://via.placeholder.com/450?text=Visit+Blogging.com+Non)');
});

jQuery('#rollover1').on('mouseleave', function(){
  jQuery('#container').css({backgroundColor:'red', backgroundImage:'none'});
});
#rollover1 {
  width: 100vw;
  height: 100vh;
}

#container {
  background-color: red;
  padding: 10px;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="rollover1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
1 голос
/ 18 июня 2020

Как было предложено в комментариях, при отпускании мыши удалите изображение, установив для него значение none и установив цвет фона.

Вы можете попробовать приведенный ниже фрагмент. 

$('#rollover1').on('mouseenter', function(){
   $('#container').css('background-image', 'url(https://picsum.photos/200/300)');
});
$('#rollover1').on('mouseleave', function(){
  $('#container').css('background-image', 'none');
  $('#container').css('background-color', '#222222');
});
#container {
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="rollover1">
<div id="container">Test</div>
</div>
1 голос
/ 18 июня 2020

так можно сделать .... 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").on({
   
        mouseenter: function(){
            $(this).css({
            "background-image":"url('https://cdn.pixabay.com/photo/2017/05/24/09/28/great-2339957_1280.jpg')",
            "background-size":"cover",
            "background-position":"center"
            });
        },  
       
        mouseleave: function(){
            $(this).css({
            "background-image": "",
            "background-color": "red"
            });
        }
       
    });
});
</script>
</head>
<body>

<p style="height:300px;width:300px;background-color:red;">this is my code.</p>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...