CSS樣式不顯示爲特定類

Question

我的css/main.css文件正確鏈接到我的index.html文件，並且所有CSS代碼都適用於我的所有HTML元素。

但是，我試圖獲得一個圖像，它顯示的信息，當懸停在哪個不工作 - CSS沒有被識別，我認爲有類的問題。

.box { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.box:before { 
 
    content: ""; 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(177, 208, 113, 0.8); 
 
    opacity: 0; 
 
    transition: all 300ms ease-in-out 0s; 
 
} 
 

 
.box:hover:before { 
 
    opacity: 1; 
 
}

<div class="container margintop-50"> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <div class="box"> 
 
     <img src="img/secgen.jpg" class="img-responsive img-circle"> 
 
     <div class="boxContent"> 
 
      <h3 class="title">Sivan Chakravarty</h3> 
 
      <span class="post">Secretary General</span> 
 
      <ul class="links"> 
 
      <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
 
      <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

編輯：這似乎是完美的在這裏工作。我使用Sublime Text，一切都設置正確;但這只是在我的瀏覽器上不起作用。在控制檯沒有錯誤，沒有任何。

Answer 1

我查your fiddle，發現一個很奇怪的問題吧：在你的CSS的所有字符的空間其實並不SPACE字符，但字符代碼在視覺上喜歡的空間，但這麼想的通過瀏覽器的認可！

用像記事本++這樣的文本編輯器代替所有這些，你會發現它在代碼片段中工作！

此外，您還可以看到更新的小提琴Here.

.box{ 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.box:before{ 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(177, 208, 113, 0.8); 
 
    opacity: 0; 
 
    transition: all 300ms ease-in-out 0s; 
 
} 
 
.box:hover:before{ 
 
    opacity: 1; 
 
} 
 

 
.box .boxContent{ 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: #fff; 
 
    z-index: 1; 
 
} 
 
.box .title{ 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    top: 18%; 
 
    transform: scale(5); 
 
    opacity: 0; 
 
    transition: all 0.3s ease-in-out 0.1s; 
 
} 
 
.box .post{ 
 
    display: block; 
 
    font-size: 16px; 
 
    font-style: italic; 
 
    position: relative; 
 
    top: 18%; 
 
    transform: scale(5); 
 
    opacity: 0; 
 
    transition: all 0.3s ease-in-out 0.2s; 
 
} 
 
.box:hover .title, 
 
.box:hover .post{ 
 
    opacity: 1; 
 
    transform: scale(1); 
 
} 
 
.box .links{ 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    top: 23%; 
 
    transform: scale(5); 
 
    opacity: 0; 
 
    transition: all 0.3s ease-in-out 0.1s; 
 
} 
 
.box:hover .links{ 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    transition-delay: 0.3s; 
 
} 
 
.box .links li{ 
 
    display: inline-block; 
 
    margin-right: 20px; 
 
} 
 
.box .links li:last-child{ 
 
    margin-right: 0; 
 
} 
 
.box .links li a{ 
 
    display: block; 
 
    width: 60px; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    border-radius: 50%; 
 
    font-size: 20px; 
 
    color: #fff; 
 
    border: 1px solid #fff; 
 
}

<div class="container margintop-50"> 
 
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <div class="box"> 
 
     <img src="img/secgen.jpg" class="img-responsive img-circle" style="height:250px"> 
 
     <div class="boxContent"> 
 
     <h3 class="title">Sivan Chakravarty</h3> 
 
      <span class="post">Secretary General</span> 
 
       <ul class="links"> 
 
       <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
 
       <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
 
       </ul> 
 
     </div>   
 
     </div> 
 
     </div>                       
 
    </div> 
 
    </div>

Answer 2

懸停在這裏工作檢查..... https://jsfiddle.net/cL361fb0/

.box { 
    overflow: hidden; 
    position: relative; 
} 

.box:before { 
    content: ""; 
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: rgba(177, 208, 113, 0.8); 
    opacity: 0; 
    transition: all 300ms ease-in-out 0s; 
} 

.box:hover:before { 
    opacity: 1; 
}