javascript - jquery不同的图像平滑悬停在所有浏览器上的背景

Question

我正在尝试使图像悬停在背景后面。

问题是这在所有浏览器上都无法正常工作。当鼠标进入图像时，我希望背景立即悬停。我怎样才能让它顺利并在所有浏览器上工作？

HTML:

<div class="col-lg-12 col-md-12 col-sm-12 col-sx-12 portfolio" id="work">
    <div class="container">
        <div class="row">
            <section class="col-lg-3 col-sm-4 col-xs-6">
                <a href="#nieuwecreatie">
                    <img src="image/nieuwecreatie.jpg" alt="nieuwecreatie" class="transition"/>
                </a>
            </section>
            <section class="col-lg-3 col-sm-4 col-xs-6">
                <a href="#avpro">
                    <img src="image/avpro.jpg" alt="avpro" class="transition"/>
                </a>
            </section>
            <section class="col-lg-3 col-sm-4 col-xs-6">
                <a href="#fuxing">
                    <img src="image/fuxing.jpg" alt="fuxing" class="transition"/>
                </a>
            </section>
            <section class="col-lg-3 col-sm-4 col-xs-6 hidden-sm">
                <a href="#seedsofhope">
                    <img src="image/seedsofhope.jpg" alt="seedsofhope" class="transition"/>
                </a>
            </section>
        </div>
        <div class="row">
            <section class="col-lg-3 col-sm-4 col-xs-6 visible-sm">
                <a href="#seedsofhope">
                    <img src="image/seedsofhope.jpg" alt="seedsofhope" class="transition"/>
                </a>
            </section>
            <section class="col-lg-3 col-sm-4 col-xs-6">
                <a href="#beneluxtaxi">
                    <img src="image/benelux-taxi.jpg" alt="benelux-taxi" class="transition"/>
                </a>
            </section>
            <section class="col-lg-3 col-sm-4 col-xs-6">
                <a href="#intergroep">
                    <img src="image/intergroep.jpg" alt="intergroep" class="transition"/>
                </a>
            </section>
        </div>
    </div>
    <div id="hovercontent" class="transition"></div>
</div>

CSS:

.transition{transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;}    
    .portfolio{padding:150px 0;  position:relative;}
        .portfolio #hovercontent{position:absolute; top:0; left: 0; width:100%; height:100%; background-size: 100% !important; z-index:-999; opacity: 0.4;}
        .portfolio section{opacity: 0; margin-bottom:20px;}
        .portfolio section img{width:100%; position: relative;}
        .portfolio section .item-layer{display:none; width:100%; height:100%; background:rgba(0,0,0,0.5); position: absolute; top:0; left:0; text-align: center; padding-top:100px; font-family: BebasNeue; font-size: 2em; color:white;}
        .portfolio section img:hover{margin:-10px 0 0 0;}

jQuery:

//load bg images
    $('#hovercontent').fadeOut();
    if(window.location.hash || !window.location.hash){
        history.replaceState(null, null,' ');
        var url = $(location).attr('href')+'image/';
    }
    $('.portfolio img').mouseenter(function(){
    var srcValue = $(this).attr('src').split('/');
    srcValue = srcValue[1].split('.');
    srcValue = srcValue[0]+'-bg';
    $('#hovercontent').fadeIn(function() {
        $(this).css('background', 'url('+url+srcValue+'.jpg) no-repeat');
    });
});

我做错了什么，我该如何解决？

Answer 1

查看 this fiddle并根据您的需要进行更改。将图像存储在 data= 属性中。

HTML:

<a href="#" data-color="#ff0000">Red BG</a>
<a href="#" data-color="#00ff06">Green BG</a>
<a href="#" data-color="#0600ff">Blue BG</a>
<a href="#" data-color="#fff600">Yellow BG</a>

Javascript:

$(document).ready(function(){

  $('a').mouseenter(function(){
   var self = $(this),
       color = self.data('color');

    $('body').css('background-color',color);
  });

});

CSS:

body {
  background-color: pink;
  -webkit-transition:background 1s;
  -moz-transition:background 1s;
  -o-transition:background 1s;
  transition:background 1s
}

根据您的需要更改它，此代码段很容易配置，并且适用于所有现代浏览器(>IE9、Chrome、Safari、Firefox、Mobile 等...)。要将图像设置为背景，我会这样使用它:

HTML:

<a href="#" data-bg-url="http://path/to/image-bg.jpg">Some BG</a>

JS:

$(document).ready(function(){

  $('a').mouseenter(function(){
   var self = $(this),
       url = self.data('bg-url');

    $('body').css('background-image', url);
  });

});

CSS:

body {
  background-color: pink;
  -webkit-transition:background 1s;
  -moz-transition:background 1s;
  -o-transition:background 1s;
  transition:background 1s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

---

编辑以启用背景图像支持

查看 this fiddle .这不是最好的解决方案，但可以按预期工作。对于每个链接，它都会创建一个带有背景图像的 DIV。之后根据悬停的链接显示相应的 div。

HTML

<a href="#" data-bg="https://placeholdit.imgix.net/~text?txtsize=100&txt=one&w=980&h=400&txttrack=0">One</a>
<a href="#" data-bg="https://placeholdit.imgix.net/~text?txtsize=100&txt=two&w=980&h=400&txttrack=0">Two</a>
<a href="#" data-bg="https://placeholdit.imgix.net/~text?txtsize=100&txt=three&w=980&h=400&txttrack=0">Three</a>
<a href="#" data-bg="https://placeholdit.imgix.net/~text?txtsize=100&txt=four&w=980&h=400&txttrack=0">Four</a>

CSS

.bgholder {
  -webkit-transition:opacity 1s;
  -moz-transition:opacity 1s;
  -o-transition:opacity 1s;
  transition:opacity 1s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
}
a {
  position: relative;
  z-index: 2;

}

JS

  $(document).ready(function(){


    $('a').each(function(i){
        var self = $(this),
            bg = self.data('bg'),
            container = '<div class="bgholder" id="back-'+i+'" style="background-image: url('+bg+');"></div>';

      self.data('trigger', 'back-'+i);

        $('body').append(container);
    });

    $('a').mouseenter(function(){
       var self = $(this),
           cont = self.data('trigger');

        $('.bgholder').css('opacity',0);
        $('#'+cont).css('opacity',1);

    });
  });