Change style of col border on mouse hover/over

[cpuser]

Hi,

I have a column and I want to change the border colour whenever the user hovers/mouse-over it. But I can’t get is to work with a hover css:

.subscription_border:hover {
border-width: 3px;

}

[ben]

CSS

    .box {
        border: 3px solid blue;
    }
    .box:hover {
        border: 3px solid red;
    }

HTML

<div class="container mt-4">
    <div class="row">
        <div class="col box">
            <h1>Fancy display heading</h1>
        </div>
    </div>
</div>

[cpuser]

@ben

  .box {
        border: 3px solid blue;
    }
    .box:hover {
        border: 3px solid red;
    }

Thanks Ben. That worked. I was actually wanting to combine it with Bootstrap. Wondering if there is a better way of doing it than what I am using below. It works, but not sure if it is the clean/prpoper way of doing it?

<div class="col box rounded-3">

[ben]

Bootstrap adds !important to the style rules when adding a border meaning that you cannot change the style on hover even if you use another !important to the style rule.

The only way is as shown.

[cpuser]

Thanks @ben! Works great!