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

只需按以下方式进行操作即可 -

示例摘录

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

.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>

引导程序中的悬停效果

2 个答案: