当鼠标停留在(悬停)框上时，我如何为这个框添加一个红色边框(一个标签)?

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;

但这似乎行不通。

如何解决这个问题，并添加一个红色边框时，鼠标在盒子上?

Tnx

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