http://www.chooseyourtelescope.com/
当你将徽标按钮(月亮、行星等(悬停时,背景1>黑色>背景2。
我想直接获得背景1>背景2并保持渐变效果。
(我对Javascript一无所知,我在下面的Stackoverflow上找到了这段代码(
这是月亮按钮的代码:
HTML
<div class="top-logos-home" id="top-logos-lune-front" >
<img src="logo-moon.png" alt="MOON">
</div>
CSS
.image-home {
position: absolute;
width: 100%;
height: 100%;
background-image: url(Frontpage.jpg);
background-size: cover;
display:inline;
top:0;
}
查询
jQuery(function(){
var $body = $('.image-home');
$('#top-logos-moon-front').hover(function(){
$body.fadeOut('slow',function(){
$body.css('background-image', 'url("Frontpage-moon.jpg")').fadeIn('slow');
});
}, function() {
$body.css('background-image', '')
})
})
我在这里创建了一个jsFiddle:https://jsfiddle.net/h0f6y58z/
Html
<div class="top-logos-home" id="top-logos-lune-front">
<img class="image-1 image" src="http://s.hswstatic.com/gif/singapura-cat.jpg" />
<img class="image-2 image" src="https://pbs.twimg.com/profile_images/424484505915621376/EOwsjaMZ_400x400.png" />
</div>
css
.image {
position: absolute;
width: 100%;
height: 100%;
background-image: url(Frontpage.jpg);
background-size: cover;
top:0;
}
jQuery
$(function () {
$('.image-2').hide();
$('.top-logos-home').mouseover(function () {
$('.image-1').fadeOut();
$('.image-2').fadeIn();
});
});
所有这些都是检查鼠标是否进入div,如果是,我们将淡出第一个图像,并在第二个图像中淡入。如果你喜欢,你可以使用第一个图像隐藏和最后一个图像显示
像这样
jQuery
$(function () {
$('.image-2').hide();
$('#top-logos-lune-front').mouseover(function () {
$('.image').first().fadeOut();
$('.image').last().fadeIn();
});
});
我通过使用opacity属性找到了一个解决方案。现在它工作得很好。
HTML
<img id="background-moon-front" class="hover-backgrounds" src="Frontpage-moon.jpg" />
CSS
.hover-backgrounds {
opacity:0;
transition: opacity 0.6s linear;
top:0;
position:absolute;
background-size: 100%;
}
JAVASCRIPT
$(document).ready(function (e) {
$("#top-logos-lune-front").hover(function (e) {
$("#background-moon-front").css("opacity", "1");
}, function() {
$("#background-moon-front").css("opacity", "0")
})
});