Question

http://www.chooseyourtelescope.com/

当您悬停徽标按钮（月球，星球等......）时，它会执行background1＆gt; BLACK＆gt; background2。

我想直接获得background1＆gt; Background2并保持淡入淡出效果。

（我对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

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', '')
    })
})

Answer 1

我使用不透明度属性找到了解决方案。现在它完美运作。

<强> 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")
    })
 });

淡化图像，它们之间没有黑色传输 - JQuery

1 个答案: