Question

我为我创建的两个网站创建了一个快速集线器，我希望将两个div并排放置，这样当您将鼠标放在每个div上时，它会更改正文背景图像。我已经做到这一点，当你将鼠标悬停在它上面时，它会改变背景，但它不是很平滑。

我真的想学习java脚本，我觉得这对我来说是一次很好的体验，感谢您的帮助

我正在使用jQuery和Bootstrap。

有没有办法只使用CSS？如果没有办法，那就好了。

HTML：

<body>
  <div class="container">
    <div class="row vertical-center">
      <div class="col-md-6">
        <div class="fre">
          <h3>Howdy</h3>
          <a href="http://www.google.com">
            <div class="fre-moveleft smooth" id="fre">
              <img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
            </div>
          </a>
          <div class="caption">
            <p>Lorem ipsum dolor sit
              <br> consectetur adipiscing elit. Aliquam</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="med">
          <h3>Partner</h3>
          <a href="http://www.google.com">
            <div class="med-moveright smooth" id="med">
              <img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
            </div>
          </a>
          <div class="caption">
            <p>Lorem ipsum dolor sit
              <br> consectetur adipiscing elit. Aliquam</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

CSS：

.vertical-center {
  min-height: 100%;
  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh;
  /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}

.scale {
  width: 60%;
  position: relative;
}

.smooth {
  transition: 0.3s ease;
  cursor: pointer;
}

.med {
  float: left;
}

.med-moveright:hover {
  transform: translate(50px);
}

.fre {
  float: right;
  text-align: right;
}

.fre-moveleft:hover {
  transform: translate(-50px);
}


/*
body {
    background-image: url(../images/kabobi.jpg);

}
*/


/*
body .fre-moveleft:hover {
    background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
*/

JS：

$("#med").hover(function() {
  $('body').css("background", "url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
});

$("#fre").hover(function() {
  $('body').css("background", "url(https://www.purinamills.com/2.purinamills.com/media/Images/MasterBrand/Lifestages/horse_lifestage_any-life-stage.png?ext=.png");
});

JSFiddle

Answer 1

当然，您可以像这样添加身体转换：

body {
    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}

https://jsfiddle.net/zdwksre7/

此css将在正文背景之间转换

此外，您可以开始尝试使用带有超时的javascript添加类，以便添加更多自定义效果。像淡入淡出，不透明度，动画等等（例如，在悬停时，将类添加到主体中（此类可以具有不透明度：0，并添加到正文而不是背景图像，不透明度转换，等待250毫秒，然后删除类淡入淡出并更改背景。这将在背景之间进行平滑的不透明度转换）

你可以在这里看到一个例子 https://jsfiddle.net/866wwr0f/

Answer 2

通过在jQuery中切换类和设置数据属性，您可以在两者之间淡入淡出，其余部分由CSS控制。

＆＃13;

var $body = $('body');

function setBg(str) {
  var bg = $body.attr('data-bg');
    $body.addClass('out');
    var t = setTimeout(function() {
      $body.attr('data-bg', str).removeClass('out');
    },250);
}

function hideBg() {
  $body.addClass('out');
}

$("#med img").hover(function() {
  setBg('med');
},function() {
  hideBg();
});

$("#fre img").hover(function() {
  setBg('fre');
},function() {
  hideBg();
});

＆＃13;

.vertical-center {
  min-height: 100%;
  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh;
  /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}

.scale {
  width: 60%;
  position: relative;
}

.smooth {
  transition: 0.3s ease;
  cursor: pointer;
}

.med {
  float: left;
}

.med-moveright:hover {
  transform: translate(50px);
}

.fre {
  float: right;
  text-align: right;
}

.fre-moveleft:hover {
  transform: translate(-50px);
}

/* new stuff */


body::before,
body::after {
  transition: opacity .25s;
  z-index: -1;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.out::after,
.out::before {
  opacity: 0;
}

[data-bg="med"]::before {
  background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
}

[data-bg="fre"]::after {
  background-image: url("https://www.purinamills.com/2.purinamills.com/media/Images/MasterBrand/Lifestages/horse_lifestage_any-life-stage.png?ext=.png");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container">
    <div class="row vertical-center">
      <div class="col-md-6">
        <div class="fre">
          <h3>Howdy</h3>
          <a href="http://www.google.com">
            <div class="fre-moveleft smooth" id="fre">
              <img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
            </div>
          </a>
          <div class="caption">
            <p>Lorem ipsum dolor sit
              <br> consectetur adipiscing elit. Aliquam</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="med">
          <h3>Partner</h3>
          <a href="http://www.google.com">
            <div class="med-moveright smooth" id="med">
              <img src="http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_03.png" class="scale">
            </div>
          </a>
          <div class="caption">
            <p>Lorem ipsum dolor sit
              <br> consectetur adipiscing elit. Aliquam</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

＆＃13;

将鼠标悬停在div上可以顺畅地更改背景

2 个答案: