Bootstrap中的悬停效果

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>

也许只需在悬停时使图像略微不透明。出于某种原因，我无法实现这一点。

- Matt

---

请问您能否附上 CSS 文件吗？ - Ramiz Wachtler

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>

- neophyte