Question

我是 BootStrap 开发的新手，我使用它实现了以下主题：http://lnx.asper-eritrea.com/

正如您在内容区域中看到的那样，有3个方框（分别命名为 La Situazione ， Archivio 和 Archivio Video ）。

这是相关代码：

<section id="lancio-progetti">
    <div class="row">

        <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>
        <div class="col-sm-4">
            <div class="box-progetto">
                <h3 class="text-center">Archivio</h3>
                <!--<p class="text-center"><img src="/wordpress/wp-content/themes/AsperTheme/assets/img/pencil-1.jpg" class="img-thumbnail img-responsive"></p>-->
                <p class="text-center"><img src="<?php bloginfo('template_url'); ?>/assets/img/icona-comunicati-big.gif" class="img-thumbnail img-responsive">
                </p>
                <p>
                    Archivio storico che raccoglie i nostri comunicati e le notizie pubblicate
                </p>
                <a href="#" class="btn btn-primary btn-large btn-block upper-botton"><span class="glyphicon glyphicon-arrow-right"></span> Visita Archivio Comunicati</a>
            </div>
        </div><!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="box-progetto">
                <h3 class="text-center">Archivio Video</h3>
                <!--<p class="text-center"><img src="/wordpress/wp-content/themes/AsperTheme/assets/img/pencil-2.jpg" class="img-thumbnail img-responsive"></p>-->
                <p class="text-center"><img src="<?php bloginfo('template_url'); ?>/assets/img/icona-video.gif" class="img-thumbnail img-responsive">
                </p>
                <p>
                    Raccolta di videodocumenti e testimonianze video
                </p>
                <a href="#" class="btn btn-primary btn-large btn-block upper-botton"><span class="glyphicon glyphicon-arrow-right"></span> Visita Archivio Video</a>
            </div>
        </div><!-- /.col-sm-4 -->

    </div><!-- /.row -->
</section><!-- /section lancio progetti-->

正如你所看到的那样，第一个盒子与其他盒子不同，因为我已经在整个块上移动了链接而不仅仅是：

<a href="#" class="btn btn-primary btn-large btn-block upper-botton"><span class="glyphicon glyphicon-arrow-right"></span> Visita Archivio Video</a>

我的问题是：使用BootStrap我可以在其他2个块的按钮链接上获得相同的效果（当我将鼠标光标放在链接上时背景颜色改变）吗？

TNX

Answer 1

在CSS中，更改此内容：

.upper-botton:hover, .upper-botton:focus, .upper-botton:active, .upper-botton.active, .open .dropdown-toggle.btn-primary {
   color: #ffffff;
   background-color: #F1B000;
   border-color: #285e8e;
}

到此（注意在CSS规则中添加.box-progetto:hover）：

.upper-botton:hover, .upper-botton:focus, .upper-botton:active, .upper-botton.active, .open .dropdown-toggle.btn-primary, .box-progetto:hover {
   color: #ffffff;
   background-color: #F1B000;
   border-color: #285e8e;
}

如何使用BootStrap框架更改此块的背景颜色？

1 个答案: