我正在使用 Bootstrap 5 制作网站，但 index.css 属性未应用于 index.html。当我将鼠标悬停在服务卡上时，背景应该会发生变化，从而产生过渡效果。应该是从这个到这个。但是，我认为链接到 HTML 的 CSS 可能有问题，因为当我尝试将网站的背景更改为随机颜色时，该更改不会出现在网站上。
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background: #f1f2fa;
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid #0b5ed7
}
.crd {
background-color: #f1f2fa;
transition: all;
}
.crd:hover {
background: #0b5ed7;
color: #fff;
transition: 0.5s;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/index.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- SERVICES SECTION START -->
<section>
<div class="container">
<div class="row py-5">
<h2 class="display-6 mb-4">Our Services</h2>
<!-- <div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2">
<i class="fas fa-camera fa-3x"></i>
<h4>CCTV Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div> -->
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-database fa-3x"></i>
<h4>Datacenter Support</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<!-- <div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2">
<i class="fas fa-sign-hanging fa-3x"></i>
<h4>Digital Signage</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div> -->
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-headset fa-3x"></i>
<h4>General Support</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-server fa-3x"></i>
<h4>Network Support</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-cash-register fa-3x"></i>
<h4>POS Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-tower-cell fa-3x"></i>
<h4>Telecom Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-bars fa-3x"></i>
<h4>Additional Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION CLOSE -->
我在将 CSS 链接到 HTML 时犯了一个错误，我解决了这个问题。不过还是感谢大家的帮助。