Ich erstelle eine Website mit Bootstrap 5, aber die Eigenschaft index.css wird nicht auf index.html angewendet. Wenn ich mit der Maus über die Servicekarte fahre, sollte sich der Hintergrund ändern und einen Übergangseffekt erzeugen. Es sollte von hier nach hier sein. Allerdings glaube ich, dass möglicherweise ein Problem mit dem mit dem HTML verknüpften CSS vorliegt, denn wenn ich versuche, den Hintergrund der Website in eine zufällige Farbe zu ändern, wird die Änderung nicht auf der Website angezeigt.
@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 时犯了一个错误，我解决了这个问题。不过还是感谢大家的帮助。