The hover effect is not functioning properly for the columns in my HTML code

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">&nbsp;&nbsp;&nbsp;&nbsp;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.

Answer №1

Initially, there is a syntax error in your code regarding the use of "!important". Make sure it is placed within the semi-colon.

Furthermore, do not forget to close the "col" div tag properly.

In order to create a transition effect, you must define two key aspects:

  1. The CSS property that you want to animate
  2. The duration of the animation

Visit this link for more information on CSS transitions.

You need to specify which element you are transitioning.

Replace this line:

transition: .5s; !important

with

transition: box-shadow .5s!important;

Lastly, I recommend inspecting the col element in your browser while hovering over it to ensure that the box-shadow effect is being applied correctly.

https://i.sstatic.net/BWo7B.png

It's possible that another element positioned below it is obstructing the visibility of the shadow.

Answer №2

Upon reviewing your code, it seems there is an issue with your styling. Fortunately, browsers tend to overlook any syntax they don't comprehend.

.col:hover {
  -o-transition: .5s !important;
  -ms-transition: .5s !important;
  -moz-transition: .5s !important;
  -webkit-transition: .5s !important;
  transition: .5s !important; /* Corrected the semicolon placement. */
  box-shadow: 10px 10px 5px #888888;
}
<div class="d-sm-flex align-items-xl-stretch justify-content-between mb-4">
  <h1 class="h3 mb-0 text-gray-800">&nbsp;&nbsp;&nbsp;&nbsp;Content Checklist</h1>
</div>
<div class="col">
    <div class="col-xl-3 col-md-6 mb-4">
        <a href="#">
            <span>
                <img src="http://via.placeholder.com/20x20">
            </span>
        </a>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <a href="#">
            <span>
                <img src="http://via.placeholder.com/20x20">
            </span>
        </a>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <a href="#">
            <span>
                <img src="http://via.placeholder.com/20x20">
            </span>
        </a>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <a href="#">
            <span>
                <img src="http://via.placeholder.com/20x20">
            </span>
        </a>
    </div>
</div>

Regarding the !important declaration, I recommend using it sparingly as a final resort. It's best to find alternative solutions to style clashes by refining selectors for smoother results.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why are tables and their contents mysteriously moving apart?

My tables look perfect in JSFiddle, but when viewed on another website in the same browser, everything shifts to the right. How can I adjust it to display correctly like in the JSFiddle example? All elements should be aligned back to the left as indicated ...

Creating a file upon pressing a submit button in an HTML file using NodeJS

When I click the submit button, the value of the id should be retrieved to create a new file. However, an error is being displayed when attempting to make the file. Code for HTML file:- <label for="">Make New File : </label> < ...

Having some trouble with properly mirroring a div

I'm currently working on a website where I have divs that expand when hovered over, revealing a link inside. Everything was going smoothly with a div that expanded to the left, but I encountered some issues when trying to create an exact mirror image ...

Troubleshooting: AngularJS Form Submission Failure

As a novice in Angular and not a JavaScript expert, I am facing challenges with form submission. My task involves loading movie showtimes from an http API and using ng-repeat to display them within a page container. The REST API requires a zipcode input, w ...

Safari enables seamless text flow into the footer without triggering scrolling as long as the length is manageable

Encountering a unique issue solely in Safari 6.0.5 on OS X 10.8.4 within certain conditions, which doesn't exist when tested on Firefox or Chrome under various scenarios in OS X. The column layout with floats is the crux of the problem. When the text ...

A method for iterating through each class link in R in order to extract the capacity seats attribute

I am looking to extract the capacity (seats) attribute for each class listed in a specific link. The link is provided as: https://ssb.bannerprod.memphis.edu/prod/bwckschd.p_get_crse_unsec If the above link does not work, please follow these instructions: ...

Alter the class generated by ng-repeat with a click

I currently have a dynamically generated menu displayed on my website, and I am looking to apply a specific class to the active menu item based on the URL (using ngRoutes). The menu items are generated from a $scope.menu object, so my initial thought was t ...

How to prevent the scroll bar from affecting a fixed div located at the top of the page

Check out this website: I am struggling with setting up a fixed menu div at the top and a content div below it on my site. I want the scroll bar to only apply to the content div and not the header div at the top, but I can't seem to figure out how to ...

Achieving CSS centering with translate and avoiding content overflow

I have a code snippet for centering content both horizontally and vertically. It functions properly unless there is too much content, in which case it gets cut off. Is there a CSS solution to prevent this overflow issue without involving JavaScript? .b ...

The width of an HTML input and button elements do not match

Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual re ...

What is the best way to position a title at the bottom center of each image within my grid gallery?

I'm struggling to find a way to position a title at the bottom of each image in my grid gallery, right in the center of the photo with a light-gray background. I want the text to be fully visible regardless of the image used. Currently, I can only put ...

Utilizing HTML5 history instead of hash URLs to preserve the user's browsing history

Our application is a single page that dynamically loads results based on query strings. The query string format we use is as follows: ?city=Delhi&pn=1 Within the SPA, there are different sections displayed on the same page. As users navigate through ...

Tips for regularly updating a variable within a Flask application

My goal is to keep updating my stuff list by adding more items to it regularly. However, I'm facing an issue where the list doesn't update as frequently as I would like (ideally every second), and I'm unsure how to incorporate a while loop w ...

What is the best way to implement individual fade-ins for each image in my project?

Regular Whenever I hover over one image, all images fade together. I'm not sure how to prevent this effect from occurring simultaneously. Any assistance would be greatly appreciated. Link to my stylesheet Link to my index page I have attempted to f ...

Retrieve the calculated events of an HTML element using JavaScript

Is there a way to retrieve the computed click events from an HTML object using JavaScript? I want to access the functions that are triggered when clicking on an HTML element. Is there a method to directly obtain the function calls instead of using the s ...

Pictures Unavailable to Show in Table

I've been working on a project where I need to insert some images into a table. Usually, this isn't an issue for me. However, today when I added the images to the table, all I see is a square border with the alt text inside it. I'm confident ...

My Drop Down menu is not displaying the <a> in two lines, and I'm having trouble getting it to show correctly

Hello there! I've encountered an issue with my drop-down menu. The text within the <a> tags is too long to fit on a single line, and I'm struggling to make it display in two lines instead. I've been experimenting for the past couple o ...

Create a dynamic webpage that accepts user input, processes it using R code, and then displays the resulting output back on the webpage

I am in the process of creating a front end interface to showcase the results of my R code, which requires two files: master.csv and detail.csv. The master.csv file contains reference data with two columns, Commodity Category and Commodity Name, listed as ...

Stacking elements in perfect alignment

Seeking assistance with React/MUI as a newcomer. I am utilizing a Stack of TextFields, which are resizing effectively based on screen width. <Stack direction="row" sx={{ margin: "16px" }} > ...

Steps for creating an edit feature when hovering over a div

Is there a way to implement a hover effect on a dynamically created table to display a small edit button in the top right corner of each cell? The goal is to have this button trigger a popup window when clicked. Something similar to the image below: https ...