懸停在divs改變背景平穩

我爲我創建的兩個網站做了一個快速樞紐，我想有兩個div並排居中，這樣當您將鼠標放在每個div上時，它會更改正文背景圖像。我已經做到了，當你將它懸停在它上面時，它會改變背景，但不平滑。懸停在divs改變背景平穩

我真的想學習Java腳本，我覺得這樣的一個很好的經驗對我來說，感謝您的幫助

我使用jQuery和引導。

有沒有辦法只是使用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

來源

2017-07-05 Zoned

這裏是你可以通過切換兩個之間淡出的方式一個類並在jQuery中設置數據屬性，其餘部分控制在CSS中。

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(); 
 
});

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

<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>

來源

2017-07-05 23:12:37

您是否也可以使光標離開照片時回到原始背景？ – Zoned

@劃定是的，但我可能會重新接近整個事情來做到這一點，可以做得比我擁有它更乾淨。雖然更新了我的回答，那是怎麼回事？ –

完美，謝謝：D – Zoned

當然，你可以轉場添加對身體是這樣的：

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/

來源

2017-07-05 22:42:43

你還可以做到這一點，當光標離開照片它會回到原來的背景？ – Zoned

懸停在divs改變背景平穩

回答

相關問題