引导程序中的悬停效果

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>