What is the best way to eliminate all hover effects on smaller devices?

What is the solution to remove hover effects on elements in CSS?

Consider the following HTML and CSS code:

@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>

Given that there are many more elements, how can you disable all hover effects for elements on screens smaller than 992px?

JSFiddle

htmlcss

Answer №1

    @media (max-width: 1220px) {
  .column {
    width: 200px;
  }
  .para {
    display: none;
  }

}

    @media only screen and (max-width: 1220px) and (min-width: 993px) {

      .link:hover {
        color: red;
      }
    }

    @media (max-width: 992px) {
      .column {
        width: 100px;
      }

    }

Explanation: The original CSS code contains media queries for different screen widths. However, the issue arises when the first media query for max-width: 1220px overrides the styles in the second media query. To prevent this, it is important to include a min-width condition in the first query. This ensures that the :hover effect specified in the second query is not applied to screens with a max-width of 992px.

UPDATE: The CSS has been adjusted to meet the requirement that certain styles should apply to all screen resolutions below 1220px.

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

Having trouble getting scrollspy to work properly in Bootstrap 5?

Can anyone help me with this issue? I tried using the code from a Bootstrap example but it's not working properly. I added data-target in JavaScript, and also included data-target on the body element. The code is a direct copy from the Bootstrap 5 sc ...

htmlbootstrap-5scrollspy

Error: PHP syntax error occurred due to unexpected double-quote mark

As a beginner in php, I've been encountering an error in my code echo "<a href=\"PHadmin_deletePatient.php?id=<?php echo $row["PatientID"]; ?>\" class='delete' title='Delete' data-toggle= ...

phphtmlsyntax-error

Embrace the power of React using curly brackets!

Today, I made the decision to dive into learning React. Typically, I use Brackets for my coding environment. The first step I took was adding the necessary sources to my HTML code. <html> <head> <link rel="stylesheet" href="styl ...

htmlreactjs

Tips for creating a more condensed materialized table with form elements

Currently, I am working on a timesheet table using Materialize CSS with form elements in cells. However, I find the height of the table rows to be too large for my liking. Is there any way to make the table more compact? If this is a limitation of Materi ...

htmlcssformsmaterialize

When HTTP 304 meets the Cache-Control directive with a value of no-cache

I'm encountering the following response from certain web server requests: First request: HTTP/1.1 200 OK Date: Mon, 16 Jan 2012 05:46:49 GMT X-Powered-By: Servlet/2.5 JSP/2.1 Content-Type: text/plain Content-Length: 78 Content-Encoding: gzip Etag: " ...

htmlhttphttp-headers

The PHP script is exhausting memory resources and triggering a fatal error

I encountered the following error message: Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 528384 bytes) in /home/u234536193/domains/monetizingonline.com/public_html/wp-includes/wp-db.php on line 2024 The problematic cod ...

phphtmldebuggingout-of-memory

The mobile header appears without any background shading

Hey there, I'm encountering a puzzling issue: I have a header with a gradient background that displays perfectly on desktop. However, when I preview it on Chrome mobile emulator, it looks fine. But when I test it on an actual tablet or mobile device, ...

htmlcssbootstrap-4

Trouble with flex wrap in my design template using Material UI

How can I create a responsive template using flexbox wrapping method? <Box sx={{ padding: 0, margin: 0, listStyle: "none", display: "flex", flexFlow: ...

cssflexboxmaterial-ui

Anchor tags are not visible to Jquery

My issue is with integrating JQUERY and PHP. In my external PHP file, I have the following echo statement - `echo ("<a href='#' id='bb'>hello</a>"); Similarly, in my external js file, I have this JQUERY code - $(' ...

javascriptphpjqueryhtmlajax

Utilizing JavaScript for enhancing the appearance of code within a pre element

Is there a way to dynamically highlight the code inside a pre element using vanilla JavaScript instead of JQuery? I'm looking for a solution that colors each tag-open and tag-close differently, displays tag values in another color, and attributes with ...

javascripthtmlpre

Employing the Jquery AJAX method to retrieve HTML content

We have a detailed guide on extracting PHP values using Jquery AJAX with JSON data type. Below, you will find the necessary code snippets for implementation. HTML CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; c ...

javascripthtmlajaxjquery

Javascript: Harnessing Textbox Arrays for Improved Functionality

Check out the form displayed below. <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="text" name="name[]" id="name"><br> <input type="text" name="name[]" id="name"><br> <input type="fil ...

javascripthtml

What is the best way to ensure the main container fills the entire screen?

Given: Bootstrap 5.1 Visual Studio 2022 Professional Edition Blazor Server Application How do I modify the container to occupy the entire screen without any margins? <div class="container bg-primary"> Hello World! </div> Thi ...

csstwitter-bootstrapblazorbootstrap-5blazor-server-side

Instructions for connecting my website's URL to a designated channel (button) on an external widget

My goal is to connect a channel from a third-party widget to my website through a URL link with a button. I want the channel to open directly under that specific URL. I attempted this method, but it seems to be ineffective: shareurexperience Animal "> ...

html

Use one tag to abbreviate multiple times

As I create a step-by-step guide, I want the audience to be able to hover over any word in the text and see its definition. However, I only want to define abbreviations once. Is there a method in html or css that allows me to achieve this? ...

htmlcssinstancesabbr

Using the HTML video tag to apply different background colors based on the individual machines being

My web application includes a video that is set to play against the same background color as the webpage. However, I am experiencing an issue where the video background appears differently on various machines using the same browser. What I would like to ac ...

htmlcssvue.jsbrowserbackground-color

Combining Bootstrap navbar with React Router for seamless navigation

I am new to using React and I am having trouble linking pages with Bootstrap navigation. I am attempting to use React Router DOM to navigate to different pages on click, but the app is not compiling because BrowserRouter is not being imported properly. I c ...

htmlcssreactjs

Move the scroll bar away from the scrollable div and reposition it on a different part of the page using CSS

Is it possible to use CSS to position the scrollbar of a div that takes up the left half of my page with overflow-y: scroll to be where the page scrollbar would normally be (far right side of the page)? I've experimented with the ::-webkit-scrollbar ...

htmlcssscrollscrollbar

Refresh the Content of a Page Using AJAX by Forcing a Full Reload

I have a webpage that automatically updates a section using jQuery AJAX every 10 seconds. Whenever I modify the CSS or JavaScript of that page, I would like to include a script in the content fetched via AJAX to trigger a full page reload. The page is ac ...

javascriptjqueryhtmlajaxreload

What is the regular expression that allows numbers between 1 and 24, including decimals?

Can anyone help me create a regex expression that only allows numbers between 1 and 24, with up to 2 decimal places? The numbers should range from 1 to 24, as well as include decimals like 1.00, 1.01, 1.02, all the way up to 24.99. ...

javascripthtmlregexexpression