Так что я пытаюсь манипулировать своим фоном, угасая его на мышином фоне.Целевой CSS встроенный фон с jquery
Но я не могу настроить его с помощью jquery.
JQuery:
$("html").mouseleave(function(){
$('#intro').fadeTo('slow',0.67,function(){
$("#intro").css("background"); //attempting to target bg
});
});
CSS:
#intro{
background: url("images/overlay.png"), url("../../images/intro.jpg");
}
как я предназначаться этот фон?
При вызове $ ('# интро'). FadeTo вы говорите, вы хотите анимировать непрозрачность интро. Третий аргумент fadeTo - это функция, которая вызывается после завершения анимации, вы не можете изменить цель fadeTo с ней. Прозрачность элемента всегда влияет на его потомков. Вы не можете использовать fadeTo для достижения того, чего хотите.
В работе вокруг, установить фоновое изображение интро с :: после того, как псевдо-элемента. Инициализируйте свою непрозрачность до 0,67 и измените ее на 1.0 при наведении. Смотрите подробности в этом фрагменте:
body{
background: #000;
}
#intro{
position: relative;
width: 300px ;
height: 300px ;
}
#intro::after{
content: "";
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg);
opacity: 0.67;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
transition: opacity 600ms;
}
#intro:hover::after{
opacity: 1;
}
#intro p{
color: #fff;
}
#intro img{
width: 100px ;
height: auto ;
}<div id="intro">
<p>La Gioconda</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg"/>
</div>$("html").mouseleave(function(){
$('#intro').fadeTo('slow',0.67,function(){
$("#intro").css('background-image', 'url(' + imageUrl + ')'); //attempting to target bg
});
});
Это все еще предназначено для всех элементов внутри div. – Joel
Aprroach1:
$("html").mouseleave(function(){
\t $('#intro').fadeTo('slow',0.67,function(){
\t $("#intro").removeClass().addClass("intro-back2"); //attempting to target bg \t
\t });
\t });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
\t <head>
\t \t <title>Test</title>
<style type="text/css">
\t \t \t .intro-back1{
\t \t \t \t background: url("http://www.bhagesh.com/images/portfolio-nature-small.jpg");
\t \t \t }
\t \t \t .intro-back2{
\t \t \t \t background: url("http://images.all-free-download.com/images/graphicthumb/zwergmanguste_nager_rodent_227139.jpg");
\t \t \t } \t \t
\t \t \t #intro{
\t \t \t \t width:300px;
\t \t \t \t height:300px; \t
\t \t \t }
</style>
\t </head>
\t <body>
\t \t <div id="intro" class="intro-back1">
\t \t </div>
\t </body>
</html>Вы можете изменить фон, когда Mouseover на #intro
Plus
Approach2:
$("html").mouseleave(function(){
\t $('#intro').fadeTo('slow',0.67,function(){
\t $("#intro").removeClass().addClass("intro-back2"); //attempting to target bg \t
\t });
\t });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
\t <head>
\t \t <title>Test</title>
<style type="text/css">
\t \t \t #opac{
opacity:0.67;
\t \t \t \t width:300px;
position:relative;
\t \t \t \t height:300px;
\t \t \t }
\t \t \t .intro-back1{
\t \t \t \t background: url("http://www.bhagesh.com/images/portfolio-nature-small.jpg");
\t \t \t }
\t \t \t .intro-back2{
\t \t \t \t background: url("http://images.all-free-download.com/images/graphicthumb/zwergmanguste_nager_rodent_227139.jpg");
\t \t \t } \t \t
\t \t \t #intro{
position:absolute;
\t \t \t \t width:300px;
\t \t \t \t height:300px; \t
\t \t \t }
</style>
\t </head>
\t <body>
\t \t <div id="intro" class="intro-back1">
\t \t </div>
\t \t <div id="opac" class="intro-back1">
\t \t </div>
\t </body>
</html>
Вы могли бы найти это полезным: HTTP://stackoverflow.com/quest ion/3079330/css3-fade-effect – SimianAngel
Спасибо за ваш вклад, однако, это не то, что я ищу. Я просто пытаюсь настроить фокус. – Joel
Ваш вызов 'css()' просто получает значение свойства background. Если вы хотите установить его, передайте второй аргумент ... –