What is the best way to reset the :hover state in CSS back to its default

I am facing a situation where I need to override a CSS rule due to iOS weirdness. The original rule is as follows:

.quiz .panel .choices a:hover,
.quiz .panel .choices a:active {background-position: 0 -30px;}

To reset the <a> tag back to its normal state on iOS, I will inject a 'iOS' class at the top level using Javascript. Therefore, the new rule that will overwrite the previous one would be:

.iOS .quiz .panel .choices a:(?????)

I am unsure about what exactly to put in place of the question marks. Could you assist me in determining the CSS rule needed to reset the <a> tag so the pseudo classes return to their default settings?

csshoverdefault

Answer №1

Sorry, I'm a bit confused about what you're asking. However, here are the four options that you can choose from:

a:link
a:hover
a:active
a:visited

If I had to take a guess, it looks like you might need this CSS code:

.iOS .quiz .panel .choices a:link {background-position: 0 0}

Answer №2

Forget about using any pseudo-class, simply go with:

.iPhone .question .section .options a

This will take precedence even without the "hover" effect! 😊

Answer №3

#main:not(.android) .question .panel .options a:hover,
.question .panel .options a:active {background-position: 0 -30px;}

Make sure to include the not for the :active line if needed. Also substitute #main with a selector that corresponds to the element where you add the .android class.

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

The minified version of Bootstrap's CSS will only be loaded when I explicitly import it in my index

I used to rely on BootstrapCDN for my styles, but now I want to download the files and use them locally. However, when I try to load the styles without an internet connection, they don't seem to work properly, especially the grid layout. My current s ...

htmlcssreactjsbootstrap-4

Bootstrap's Vertical Margin Concept

Is there a way to include margin or a line similar to the image below? [![Please refer to the accompanying image][1]][1] ...

htmlcsstwitter-bootstrap

What is the method to position a flex column below another?

When viewed on a cell phone, I need the columns to be stacked on top of each other. I'm using Bootstrap 4 with flex divs, utilizing flex columns and rows. I've tried using the order property but it didn't work. Here is my code: <div id= ...

cssflexboxbootstrap-4

Toggle the visibility of a second checkbox based on the checked and unchecked state of an iCheck checkbox

Code snippet for checkbox styling <script> $(function () { //Initialize Select2 Elements $(".select2").select2(); //Applying flat red color scheme for iCheck $('input[type="checkbox"].flat-red, input[type="radio"].flat-r ...

javascriptjqueryhtmlcssicheck

Can the Bootstrap grid be arranged vertically?

I'm finding it difficult to work on a project with Bootstrap's horizontal grid system. What I want to achieve is to have my page divided into 4 sections, with the left side blocks having equal height and the right side blocks having varying heigh ...

htmlcssbootstrap-5

Having trouble with overflow-x? Instead of scrolling just the element, it's causing

My goal is to have the div ".slide" scroll horizontally only, but for some reason, the entire body is scrolling instead. I'm not sure why. If you resize the page to mobile and try scrolling horizontally, you'll see what I mean. Within the div.s ...

htmlcss

Modify the stroke attribute of the <path> element using CSS

I have a generated svg path code that I want to customize using CSS to remove the default stroke. How can I override the stroke property and set it to none? code: <div class="container" style="position: absolute; left: 3px; z-index: 1;"> <svg he ...

htmlcsssvg

Unable to get the Gtranslate function to function properly within the drop-down menu

Currently, I am using Gtranslate.io languages on my website with flags displayed without a drop-down menu. Everything is running smoothly but now I am looking to enhance the user experience by placing the flags inside a drop-down list. I want English to ...

javascriptjqueryhtmlcss

The variable 'DataList1' is not recognized within the current scope

Upon loading a page, I encountered the following error message: 'The name 'DataList1' does not exist in the current context' Below is the code snippet where the issue occurred: listviewvideos.aspx.cs private void BindGrid() { ...

c#htmlcssasp.net.net

The overflow hidden property is failing to conceal the background of the parent element

I am currently facing an issue where a small 1px red border appears when I set border radius and overflow:hidden. My goal is to completely eliminate the red border around the image. I have experimented with various CSS properties like isolation, border-c ...

cssoverflow

What is the process for adjusting the width of an element using JavaScript?

I have a unique bar with one half red and the other green. I am trying to subtract 1vw from the width of the red section. Unfortunately, using style.width is not yielding the desired result. See below for the code snippet I am currently using: //FIGHT do ...

javascriptcsswidth

Can anyone provide assistance with understanding the background-size property?

I am struggling to resize the background image on my website, similar to the one on this website. No matter what I try with the position or background-size property, the image remains too large and does not adjust properly. Additionally, I need the image t ...

htmlcssbackground

Floating CSS3 animations within HTML elements

I'm struggling to understand why the animated arrow on my website refuses to go behind the other elements. The animation code I've used for the arrow in CSS3 is as follows: -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-an ...

htmlcsscss-animations

How can a new <li> element be created without being influenced by certain CSS styles?

I am attempting to enhance my menubar by adding a signup/login item aligned on the right without affecting the other center-aligned items. Essentially, I have an entry named "Login/Sign Up" that should maintain its own unique style while seamlessly blendin ...

javascripthtmlcss

Tips on how to showcase list items in a horizontal manner while maintaining consistent spacing and ensuring they are

I have a list of items denoted by the "li" tag, and I am looking for a way to display them horizontally or in a neat format. Below is the HTML code snippet: <!doctype html> <html lang="en" ng-app="app"> <head> ... </head> <bo ...

jqueryhtmlcss

Maximizing the power of CSS within Visual Studio

After conducting extensive research in this area, I have not come across any remarkable information regarding the use of CSS in Visual Studio. While many people discuss it, specifics seem to be lacking. I am interested in learning about simple methods for ...

asp.netcssvisual-studio

CSS: Breaking free from the constraints of a Bootstrap-inspired grid layout

Looking to create a template with a background on the left side that extends to the edge of the page within an 8 of 12 bootstrap columns setup. The remaining 4 columns on the right will not have a background. This layout should be responsive, stacking on t ...

cssbootstrap-4

"Verifying the dimensions of the input sizes with the i

It's possible that this question has been asked before on this platform. However, I haven't come across a satisfactory answer yet. How can I adjust the size of inputs in the iCheck library? The current size is too large for my website. Css: .ic ...

cssinputsizeicheck

triangular shape at the top and rounded shape at the bottom combined with various colors

Is there a way to create a triangle with a rounded bottom section in a different color? #box { content:""; width: 0; height: 0; border-style: solid; border-width: 0 150px 150px 150px; border-color: transparent yellow red blue; ...

css

Should servlet response be HTML for use in AJAX calls?

I am currently in the process of developing a web application with multiple pages, including index.html which serves as the main page and contains various <a> tabs linking to different Servlet pages. As part of my design, I have a consistent CSS lay ...

javacssajaxservlets