引导程序中的悬停效果

Posted 2023-05-08

【中文标题】引导程序中的悬停效果

【英文标题】：Hover effects in bootstrap

【发布时间】：2017-08-09 02:48:24

【问题描述】：

我正在尝试为 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" ></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" ></a>
            </div>

也许只是让图像在悬停时稍微不透明。由于某种原因，我无法让它工作

【问题讨论】：

能否也附上CSS？

【参考方案1】：

只需按照以下方式进行--

示例 sn-p

.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" ></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" ></a>
            </div>