요소 위에 마우스를 놓고 부모 div의 배경을 희미하게합니다.

Question

전체 화면 div에 요소가 있습니다. 내가»요소«및 페이드에서 div».section«의 배경 이미지로 이동하고 싶습니다. 배경 이미지 만 표시하는 것은 문제가 아니지만 페이드 애니메이션을 추가하는 방법에 대해서는 알지 못합니다.

$(function() { 
 
    $('.element').hover(function() { 
 
    $('.section').css('background-image', 'url(https://ih0.redbubble.net/image.87373734.8395/flat,800x800,075,t.jpg)'); 
 
    }, function() { 
 
    // on mouseout, reset the background 
 
    $('.section').css('background-image', ''); 
 
    }); 
 
});

.section { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    transition: 1s ease all; 
 
} 
 

 
.element { 
 
    margin-top: 45%; 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="section"> 
 
<div class="element">hover me</div> 
 
</div>

https://jsfiddle.net/sr1qj1pc/

당신이 나를 도울 수 있을까요?

Answer 1

피들을 업데이트했습니다.

당신은 혼자가 jQuery를 사용할 필요가 CSS를 사용할 수 없습니다. pseudo element을 사용하여 원하는 효과를 얻을 수 있습니다. 이 경우

, 당신은 .element 그 다음은 .section 특정 그래픽 요소가 대상이 될 수있는 상황 (있는 경우)에 따라 지정 pointer-events를 사용할 수있는 부모의 배경을 표시 인 아이 요소를 올려 놓으면 마우스 이벤트. https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

CSS :

.section { 
    width: 400px; 
    height: 400px; 
    border: 1px solid black; 
    text-align: center; 
    transition: 1s ease all; 
    position: relative; 
    pointer-events: none; 
} 

.section:after { 
    background: url(https://ih0.redbubble.net/image.87373734.8395/flat,800x800,075,t.jpg) repeat; 
    content: ""; 
    opacity: 0; 
    width: inherit; 
    height: inherit; 
    position: absolute; 
    top: 0; 
    left: 0; 
    /* TRANSISITION */ 
    transition: opacity 1s ease-in-out; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
} 

.element { 
    position: relative; 
    top: 50%; 
    z-index: 1; 
    pointer-events: auto; 
} 

.section:hover:after{ 
    opacity: 1; 
} 

https://jsfiddle.net/sr1qj1pc/3/

Answer 2

또 다른 빠른 방법 - [jQuery를 배경 이미지에 페이드]의

$(function() { 
    $('.element').hover(function() { 
    var section = $('.section'); 
    section.fadeOut(0, function(){ 
     section.css('background-image', 'url(https://ih0.redbubble.net/image.87373734.8395/flat,800x800,075,t.jpg)'); 
     section.children().fadeIn(); 
     section.fadeIn(1500); 
    }); 
    }, function() { 
    // on mouseout, reset the background 
    $('.section').css('background-image', ''); 
    }); 
});