引導中的懸停效果

Question

我正試圖在Bootstrap中爲縮略圖的一部分應用簡單的懸停效果。

<div class="regionPage"> 
<section class="thumbs">  
    <h3>Full list:</h3> 
     <div class="row"> 
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
       <a class="thumbnail" title="Afghanistan" href="../asia/afghanistan.php"><img src="../images/covers/afghanistanthumb.jpg" alt="Afghanistan"></a> 
      </div>  
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
       <a class="thumbnail" title="Argentina" href="../samerica/argentina.php"><img src="../images/covers/argentinathumb.jpg" alt="Argentina"></a> 
      </div> 

也許只是讓圖像在懸停時稍微不透明。出於某種原因，我不能得到這個工作

Answer 1

只是它做好以下方式 -

摘要示例

.thumbnail:hover { 
 
background-color: red; 
 
opacity: 0.5; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
     
 

 
<div class="regionPage"> 
 
<section class="thumbs">  
 
    <h3>Full list:</h3> 
 
     <div class="row"> 
 
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
 
       <a class="thumbnail" title="Afghanistan" href="../asia/afghanistan.php"><img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Afghanistan"></a> 
 
      </div>  
 
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
 
       <a class="thumbnail" title="Argentina" href="../samerica/argentina.php"><img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Argentina"></a> 
 
      </div>