twitter-bootstrap 引导程序中的悬停效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42859313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-22 00:41:55 来源:igfitidea点击:
Hover effects in bootstrap
提问by Matt
I am trying to apply a simple hover effect for a section of thumbnails in Bootstrap.
我正在尝试为 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>
Maybe to just make the image slightly opaque on hover. For some reason I cannot get this to work
也许只是在悬停时使图像稍微不透明。出于某种原因，我无法让它发挥作用
回答by neophyte
Just do it in the following way--
只需按照以下方式进行 -
example snippet
示例片段
.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>回答by sreenu dangi
.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>