How to remove hover effects for elements in css.
I have for example such html and css:
@media (max-width: 1220px) {
.column {
width: 200px;
}
.para {
display: none;
}
.link:hover {
color: red;
}
}
@media (max-width: 992px) {
.column {
width: 100px;
}
}
<div class="column">
<a class="link" href="#">Some link</a>
<p class="para">
Some para
</p>
</div>
By fact there is much more element. How to disable all hover for elements for screen size less than 992px?