html - 当鼠标悬停在框上时，如何向该框(a 标签)添加红色边框？

Question

我正在处理这个模板:http://lnx.asper-eritrea.com/

如您所见，在标题幻灯片下，我有 3 个框(分别命名为 La Situazione、Archivio* 和 **Archivio Video)

这是其中一个框的代码片段:

<a href="#">
    <div class="col-sm-4">
        <div class="box-progetto">
            <h3 class="text-center">La Situazione</h3>
            <!--<p class="text-center"><img src="/wordpress/wp-content/themes/AsperTheme/assets/img/pencil-3.jpg" class="img-thumbnail img-responsive"></p>-->
            <p class="text-center"><img src="<?php bloginfo('template_url'); ?>/assets/img/icona-situazione-big.gif" class="img-thumbnail img-responsive">
            </p>
            <p>
                La situazione in sintesi: situazione politica dell'Eritrea           
            </p>
            <!--<a href="#" class="btn btn-primary btn-large btn-block upper-botton"><span class="glyphicon glyphicon-arrow-right"></span> Visita Archivio Attività</a>-->
        </div>
    </div><!-- /.col-sm-4 -->
</a>

这是悬停前一个框的相关CSS(当用户将鼠标放在框上时):

.upper-botton:hover, 
.upper-botton:focus, 
.upper-botton:active, 
.upper-botton.active, 
.open 
.dropdown-toggle.btn-primary, 
.box-progetto:hover {
   color: #990000;
   background-color: #FBE7B3;
   border-color: #990000;
   border-bottom-width: 2px;
}

我的问题是，当鼠标在框上时，我想在框周围添加一个红色边框。因此，正如您在前面的代码片段中所见，我尝试添加以下行:

border-color: #990000;
border-bottom-width: 2px;

但这似乎行不通。

如何解决此问题并在鼠标位于框上时添加红色边框？

谢谢

Answer 1

只需添加 border: 2px solid #990000;，它不起作用，因为您还需要指定边框样式，如实线、虚线等。您可以看到下面的列表。

此演示中的所有边框样式类型:http://jsfiddle.net/a_incarnati/djwf0L60/

摆脱

.upper-botton:hover, .upper-botton:focus, .upper-botton:active, .upper-botton.active, .open .dropdown-toggle.btn-primary, .box-progetto:hover {
    border-color: #990000;
    border-bottom-width: 2px;
}

和替换为

.upper-botton:hover, .upper-botton:focus, .upper-botton:active, .upper-botton.active, .open .dropdown-toggle.btn-primary, .box-progetto:hover {
    border: 2px solid #990000;
}