Bootstrap 3不允许我在悬停时使用CSS/JQuery图像替换

UPDATE：我的项目现在在Github上。这是网站（顺便说一句，它还没有完成！）

我正试图在我的网站上创建以下效果：

我想让社交媒体图片在悬停时，通过缓慢、平稳的过渡，被不同的图片所取代。我能够在一个简单的测试环境中成功地实现这一点：

<!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不接受。指南针正在运行，没有错误。"Inspect元素"没有显示我的新SCSS代码（它甚至不在那里，并且被划掉了）。我已经检查了生成的CSS文件，新代码就在那里。我可以在SCSS中更改其他内容，这些更改会显示在浏览器中。

那么，是什么呢？你知道伏都教Bootstrap在做什么吗？或者，如果你没有任何想法，但通过Bootstrap/SCSS成功地进行了图像替换和转换，你是如何做到的？

感谢您的互联网

在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;
}

我还提出了实现同样效果的其他方法。

相关内容

最新更新

热门标签：