After using django to create a web app, I encountered an issue. When hovering over the img column, it should display a shadow effect. However, my CSS is not functioning correctly and there is no change when I move the mouse.
Here's the HTML code:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
.col:hover{
-o-transition:.5s !important ;
-ms-transition:.5s !important;
-moz-transition:.5s !important;
-webkit-transition:.5s !important;
transition:.5s; !important
box-shadow: 10px 10px 5px #888888 !important;
}
</style>
<!-- Content Row -->
<div class="d-sm-flex align-items-xl-stretch justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"> Content Checklist</h1>
</div>
<div class="col">
<div class="col-xl-3 col-md-6 mb-4">
<a href="{% url 'bms:new_content_checklist' %}">
<span STYLE="font-size:600%'">
<img src="{% static 'image/new_cc.png' %}">
</span></a>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<a href="{% url 'bms:content_checklist_discipline' %}">
<span STYLE="font-size:600%'">
<img src="{% static 'image/extract_discipline.png' %}">
</span></a>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<a href="{% url 'bms:courseinfo_list' %}">
<span STYLE="font-size:600%'">
<img src="{% static 'image/extract_course.png' %}">
</span></a>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<a href="{% url 'bms:emailinfo_list' %}">
<span STYLE="font-size:600%'">
<img src="{% static 'image/email_templates.png' %}">
</span></a>
</div>
{% endblock %}
The hover effect in the CSS is not taking effect on my page.
I attempted to change from .col to .img but even after refreshing the page, the issue persists.