Question

我在Bootstrap 4中使用此代码。我所需要的只是更改.card元素的背景颜色，但是如果使用Stretched-link，它将不起作用。

您能帮我解决问题吗？

.card:hover {
  background-color: blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card bg-light wow fadeIn position-relative">
  <div class="row no-gutters">
    <div class="col-md-12">
      <div class="card-body">
        <h4>Test</h4>
        <p>Caption</p>
        <a href=".." class="stretched-link"></a>
      </div>
    </div>
  </div>
</div>

Answer 1

级联顺序如下所示：^ref：

根据重要性（正常或重要）和来源（作者，用户或用户代理）进行排序。以升序排列：


用户代理声明

用户常规声明

编写常规声明

撰写重要声明

用户重要声明

.bg-light类具有以下样式：

.bg-light {
    background-color: #f8f9fa!important;
}

因此，应用于background-color的{{1}}属性将被覆盖。为了解决此问题，.card:hover还需要.card:hover规则。

!important

.card:hover {
  background-color: blue !important;
}

Answer 2

在您的值之后添加！important，它将起作用。

.card:hover {
      background-color: blue !important;
    }

.card:hover {
  background-color: blue !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card bg-light wow fadeIn position-relative">
  <div class="row no-gutters">
    <div class="col-md-12">
      <div class="card-body">
        <h4>Test</h4>
        <p>Caption</p>
        <a href=".." class="stretched-link"></a>
      </div>
    </div>
  </div>
</div>

悬停链接的悬停效果

2 个答案: