引導3不讓我使用CSS/JQuery圖像替換懸停與轉換

更新：我的項目現在在Github。這裏是site（順便說一句這還不算完！）引導3不讓我使用CSS/JQuery圖像替換懸停與轉換

我想創建自己的網站產生以下影響：

我想有，徘徊的時候，會用不同的圖像通過更換社交媒體圖片緩慢而平穩的過渡。我是能夠成功地得到這個工作在一個簡單的測試環境：

<!DOCTYPE html> 
<html> 
<head> 
    <style> 

     img.one { 
     position: absolute; 
     left: 0; 
     top: 0; 
     z-index: 10; 
     } 

     img.two { 
     position: absolute; 
     left: 0; 
     top: 0; 
    } 

    </style>

<ul class="gallery"> 
    <ul class="gallery"> 
     <li><a href="https://twitter.com/AndreaLeigh111" target="_blank"><img class="one" src="images/icon-twitter.png" alt=""/> <img class="two" src="images/icon-twitter-hover.png" alt="" /></a></li> 
    </ul> 
    </ul> 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 

    $(document).ready(function(){ 
    $("img.one").hover(
     function() { 
     $(this).stop().animate({"opacity": "0"}, "slow"); 
    }, 
     function() { 
     $(this).stop().animate({"opacity": "1"}, "slow"); 
    }); 
    });

它瓦特在瀏覽器中使用得很好，一切都是彩虹和獨角獸。然後，我嘗試在當前的項目中複製這個項目，我正在使用SCSS和Bootstrap 3（我知道，不是3.3，但現在我沒有實力）構建這個項目。下面是我的代碼片段：

 <div class="container-fluid" id="contact"> 
     <div class="row"> 
     <img src="images/CONTACT.svg" class="img-responsive" alt="CONTACT"/> 
     <div class="col-sm-10 col-sm-offset-1"> 
      <div class="col-sm-2"> 
       <a href="https://twitter.com/AndreaLeigh111" target="_blank"><img class="one" src="images/icon-twitter.png" alt=""/> <img class="two" src="images/icon-twitter-hover.png" alt="" /></a> 
      </div>  
     </div> 

     <div class="col-md-8 col-md-offset-2 col-xs-12"> 
      <p class="text-center"> 
      BUILT WITH A CAT ON MY LAP. ANDREA L. WILLIAMSON &copy; 2014. 
      </p> 
     </div> 

    </div> 
    </div> 

    <!--more html code here, but not relevant--> 

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 

     $(document).ready(function(){ 
     $("img.one").hover(
      function() { 
      $(this).stop().animate({"opacity": "0"}, "slow"); 
     }, 
      function() { 
      $(this).stop().animate({"opacity": "1"}, "slow"); 
     }); 
     }); 

    </script>

這裏是我的SCSS：

div#contact.container-fluid div.row { 
    background-color: black; 
    div.col-sm-10.col-sm-offset-1 div.col-sm-2.col.sm-offset-1 { 
     a img.one { 
      position: absolute; 
      left: 0; 
      top: 0; 
      z-index: 10; 
     } 

     a img.two { 
      position: absolute; 
      left: 0; 
      top: 0; 
     } 
    } 

    .col-md-8 { 
     color: rgb(108, 111, 118); 
     font-family: 'robotoblack', sans-serif; 
     padding-top: 50px; 
     padding-bottom: 15px; 
    } 
    }

第一圖像消失與不錯的慢過渡，甜蜜！但第二個圖像直接位於第一個圖像的下方，而不是位於同一位置。由於某種原因，我的SCSS沒有采取。指南針正在運行，沒有錯誤。「檢查元素」沒有顯示我的新SCSS代碼（它甚至不存在並劃掉）。我檢查了生成的CSS文件，新代碼在那裏。我可以在SCSS中改變其他的東西，並在瀏覽器中顯示更改。

那麼，什麼給了？關於什麼voodoo Bootstrap正在做什麼的想法？或者，如果您沒有任何想法，但已成功通過Bootstrap/SCSS進行映像替換，您是如何做到的？

THANK YOU INTERNET

來源

2014-11-05 Andrea Leigh

你能否提供一個小提示向我們展示更多？現場系統上的圖像切換問題也可能來自瀏覽器首先下載圖像，這需要一些時間，但根據您的描述，這似乎不是問題在這裏... – 2014-11-05 18:31:49

是的！我正在努力嘗試使用圖像和SCSS代碼獲取所有代碼。 – 2014-11-05 19:29:15

在Twitter上跟蹤後，在樣式表的選擇是不正確的。

div#contact.container-fluid div.row div.col-sm-10.col-sm-offset-1 div.col-sm-2.col-sm-offset-1 a img.one { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 10; 
} 

div#contact.container-fluid div.row div.col-sm-10.col-sm-offset-1 div.col-sm-2.col-sm-offset-1 a img.two { 
    position: absolute; 
    left: 0; 
    top: 0; 
}

本來應該是：

div#contact.container-fluid div.row div.col-sm-10.col-sm-offset-1 div.col-sm-2 a img.one { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 10; 
} 

div#contact.container-fluid div.row div.col-sm-10.col-sm-offset-1 div.col-sm-2 a img.two { 
    position: absolute; 
    left: 0; 
    top: 0; 
}

我建議實現同樣的效果，以及可選的方式。

來源

2014-11-05 21:18:44 faustman

引導3不讓我使用CSS/JQuery圖像替換懸停與轉換

回答

相關問題