Error in Firefox: "Anticipated media feature name, but discovered 'hover'"

I am trying to style elements differently based on whether the client browser supports hovering or not. I came across media features as a solution and implemented it in the following way:

/* Supports hovering */
@media (hover: hover) { ... }

/* Does not support hovering */
@media (hover: none) { ... }

Although this method works perfectly fine on Chrome, I encountered an error on Firefox that says 

Expected media feature name but found ‘hover’
. This was surprising to me because I originally learned about using hover as a media feature from developer.mozilla.org.

Is there something else I need to do in order to make this work on Firefox?

For instance, even though this example of utilizing hover as a media feature functions correctly on Chrome, it does not work for me on Firefox.

Chrome: Version 67.0.3396.79 (Official Build) (64-bit)
Firefox: 60.0.2 (64-bit)

cssfirefoxhovermedia-queriesinteraction-media-features

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

Checking the opacity with an if/else statement, then adding a class without removing the existing class

This function is designed to check the opacity of the header, which fades out as a user scrolls down. If the opacity is less than 1, it disables clickability by adding the class "headerclickoff". However, there seems to be an issue with removing the clas ...

javascriptjquerycss

Using Node.js and Express, the CSS does not load due to route parameters

I'm currently working on a basic website project using Node.js, Express, and the EJS template engine. I've run into an issue where my external CSS files are not loading properly on routes that contain route parameters. Here's a snippet of my ...

cssnode.jsexpress

Adjust the transparency of a `<ul>` element as it descends on the webpage - CSS3

I have a list (<ul>) that I would like to fade out as it scrolls down the page. I attempted to use linear-gradient, but I was unsuccessful. Is this even possible? You can view an example of what I am trying to achieve on JSFiddle here: http://jsfidd ...

cssopacity

Here's how you can combine two individual LESS files using grunt-recess

Hey there! I'm working on compiling 2 separate files using grunt recess: recess: { dist: { options: { compile: true }, files: { 'path/css/custom. ...

csslessgruntjsrecesstwitter-recess

Hiding elements in dark mode using `hidden` or `block` in Tailwind will not override its own hidden selector

To switch between dark and light mode for these two images, the dark:block selector does not override the hidden class. <div className="ml-5 content-center"> <img className="hidden dark:block h-6 w-auto my-1" src="/stati ...

csstailwind-css

Why aren't NavBar Image Links Functional, even though the code seems flawless? What could be the issue?

Looking at the current HTML code snippet I have within the <head> section, it includes: <ul class="nav"> <li> <a href="http://www.greg-holmes.com/#/title" target="_blank"> <img src="img/home.png"> ...

htmlcssnavbar

Struggling with aligning and floating links to the right while crafting a custom navigation bar

I'm in the process of crafting a custom navigation bar for my website, with the intention of having my name prominently displayed on the far left while the links float to the far right. I've utilized CSS to style everything within the nav section ...

htmlcss

Make sure to load the <img> html tag before implementing js masonry for optimal

I am facing an issue with jQuery Masonry as it arranges my 'bricks' immediately without waiting for images to load in. Additionally, I need the images to be responsive so I cannot define their height and width like this: <img src="asas" heigh ...

jquerycssjquery-masonry

The scrollbar CSS appears to be missing on iPhone browsers Chrome and Safari

After spending the entire day searching for a solution to override the irritating scrollbar issue on my iPhone, I came across this simple example: .scroller { background: lightblue; height: 1000px; max-width: 400px; margin: 90px auto; padding: ...

htmlcss

Place a button in relation to the top of its parent element

I am trying to display control buttons at the top of a table cell when hovering over an image within the cell. Here is the HTML structure I have: <table id="pridat_fotky"> <tbody> <tr> <td class=" ...

htmlcss

What is the technique for rearranging columns to be at the top in Foundation for mobile devices?

On my desktop, I have a layout like this: [Column1 large-8] [Column2 large-4] For mobile view, I'd like it to be like this: [Column2 large-4] [Column1 large-8] Below is the code snippet I am working with: <div id="search-content" class="row ma ...

htmlcsszurb-foundation

Combining CSS to Align Two Form Fields Side by Side

I recently came across an online form and I'm attempting to customize it by aligning the phone and email text fields next to each other. I have made some progress, but the formatting is not quite right. The fields are too small and adjusting their siz ...

htmlcss

What is the best way to adjust the background color of Material UI's theme based on different screen sizes?

Having trouble replacing hard-coded CSS breakpoints with Material UI theme settings. @media screen and (min-width: 0px) and (max-width: 400px) { body { background-color: red; } } @media screen and (min-width: 401px) and (max-width: 599px) { body { ...

cssreactjsmaterial-ui

Ways to ensure that a div, header, container, and other elements completely cover the viewport

Currently, I am attempting to create a header that spans the entire viewport regardless of screen size. This header will be split horizontally into 3 equal sections, each occupying one third of the header space. I experimented with setting the header hei ...

htmlcsslayout

Prevent the underlining of the :before content of a link from being affected by a rule applied to the link

I have a hyperlink that becomes underlined when hovered over. I want to add a > symbol before the link, but I don't want it to be underlined when the link is hovered. Here's the code I'm using: .box.blueb a { color: #0098aa; } .box.blueb ...

csshyperlinkunderline

Issues with scaling background videos in HTML5

I'm having trouble making a video scale properly with the browser window while still covering the entire area. Does anyone know why my current approach isn't working? HTML: <div class="bgVideoWrap"> <video id="bgVideo" loop="true" aut ...

csshtml

Table lines that are indented

I am currently in the process of transforming a standard HTML table into an indented version like this: Is there a way to hide the initial part of the border so that it aligns with the start of the text, even if I can't do it directly in HTML? ...

htmlcss

Ways to assign a CSS class specifically for images

.calendarList { background-image: url('/resource3/hpsc/common/images/calendar.png'); background-position: 135px 50%; background-repeat: no-repeat; cursor:pointer; } <input type="text" id="toDatepicker" class="cal ...

javascriptjquerycss

Using props as classnames in next.js applications

I am currently attempting to create a dynamic header for each page of my app that changes color based on the current page. Here is my approach: <Header className="headerBitcoin"></Header> My goal is to have the same header component ...

javascriptcssreactjsnext.jscss-modules

Is there a way to create an animation for changing .text in response to an on click event?

I'm currently developing a simple calculator that increases a variable when a button is clicked, displaying the updated value in a div. Each click on the 'amount-upwards' button adds 200 to the displayed number. Below is the jQuery code I a ...

jquerycssanimation