Unresponsive Hover Effect on iPad

I've implemented a hover effect on the menu for my one-page website. When a user hovers over a navigation link on desktop, the color changes to #ed1c28.

.nf-navbar .navbar-collapse a:hover {
   color: #ed1c28;
}

Additionally, when a user clicks on a navigation link, the page scrolls down to that section.

$("html, body").animate({
    scrollTop: ($(winHash).offset().top) + "px"
 }, {
    duration: 1000
 });

Everything works fine on desktop, but on iPad, after clicking a nav link, the hover effect stays activated and the color remains #ed1c28 even after the scroll. How can I disable this hover effect on touch devices?

htmlcssipaddevice-compatibility

Answer №1

If you want to make a link active, consider using the following CSS code snippet:

.nf-navbar .navbar-collapse a:active {
   text-decoration: underline;
}

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

When making a jQuery + AJAX request, IE8 is causing a null return value

I'm completely stumped as to why this issue is happening. To start, the code has been checked and validated by the W3C validator as HTML5, except for some URL encoding problems (such as & needing to be &), but I don't have the ability ...

javascriptjqueryhtmlajaxinternet-explorer

Automatically retrieve the generated PDF file upon completion (Node.js and Express)

I've been utilizing the node module html-pdf to seamlessly convert my HTML into PDF format. The conversion process goes smoothly, but I'm encountering difficulties when it comes to downloading the file once it's been generated. Below is the ...

javascripthtmlnode.jsexpress

Troubleshooting issue with applying hover effect to child divs

How come when I hover over one of the child items in my parentDiv, the background of the last childDiv changes no matter which child I place my mouse on? for (let i = 0; i < Number(height); i++) { for (let j = 0; j < Number(width); j++ ...

javascripthtmlcsstypescript

What is the best way to achieve this effect with CSS?

Is there a way to create this design with CSS? I experimented with applying border CSS and rotating the DIV, but couldn't quite achieve the desired result. Here is an image for reference: https://i.stack.imgur.com/yW6wK.png ...

htmlcssdrawing

Using jQuery and HTML to create numerous links that direct to a solitary iframe

I created a basic overlay setup using css, html, and jQuery. Here's how it looks: <a class="activator" id="activator" style="" href="#">hello</a> <div class="overlay" id="overlay" style="display:none;"></div> <div style="d ...

jquerycsshtmljquery-ui

Positioning elements at the bottom of the container

There is a dilemma that only those in the world of web development will understand. Beware! I have envisioned a layout for a website I am constructing. The concept involves tilted <hr/> elements on the page, with text wrapping around them (refer to ...

javascripthtmlcss

What are the best ways to ensure a website is responsive in a vertical

When designing a responsive webpage, I encountered an issue with the body element not properly expanding the content vertically. Despite enlarging the web content horizontally, the body failed to adjust its height accordingly, resulting in unwanted black a ...

htmlcss

Passing PHP value from a current page to a popup page externally: A guide

I'm currently facing an issue at work where there is a repetitive button and value based on the database. I need to extract the selected value from the current page into a pop-up page whenever the corresponding button is clicked throughout the repetit ...

javascriptphpjqueryhtml

How come my gifs appear tiny even though I've adjusted their width to 32% each?

I am trying to display three gifs in a row, each taking up one-third of the width of the page. However, when I preview the page, the gifs appear tiny. I have set the divs to 32% each and the gifs should fill 100% of their respective div. Here is the code s ...

htmlcss

The <hr> tag is not displaying properly within the <option> element

I'm facing an issue with a selection element in my Vue project <div class="resultContainer"> <section> <option class="resultBtn" v-for="exchange in finalExchanges"> {{exchange}} <hr></option> </section> ...

htmlcss

Animate text and div elements with bounce or fade-in effects when they appear on the screen in a React application

Animating the elements of my website is a simple task for me, however I am looking to have them animate only when they are visible on the screen without relying on pixels or offsets. I want the animations to be responsive, even in phone mode, without hav ...

cssreactjsanimationwow.js

Extract a section of the table

I'm looking to copy an HTML table to the clipboard, but I only want to include the rows and not the header row. Here is the structure of the table: <table style="width:100%" #table> <tr> <th class="border"></th> ...

javascripthtmlangularhtml-table

PHP Pear Mail HTML Edition

Despite being able to successfully send emails with text content, I'm facing difficulties in sending HTML emails. The authentication is turned off and Google Apps authenticates based on the server's IP address. $message = 'Blah blah blah&ap ...

phphtmlemailpear

Spring REST service prevents Cross-Origin Requests with AJAX

Having Trouble Accessing Spring REST Service My spring service @RequestMapping(value = "/MAS/authenticate", method = RequestMethod.POST) public ResponseEntity<Map<String, String>> authenticate(@RequestBody Subject subject) { Map<String ...

javajavascripthtmlajaxspring

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; ctx.lineWidth = 2; ctx.font = '14px verdana'; var PI2 = Math.PI * 2; var myColor = ["Gr ...

javascriptjqueryhtmlcanvas

What is the best way to update placeholders in Angular 8+?

I have a collection of items: a = ['apple', 'mango', 'grape', 'papaya', 'banana', 'cucumber']. An input element is present with a placeholder stating select from fruits (the array elements should ...

javascripthtmlangularangular11

Failure to highlight items when using the multiple select function

After adding a select all button to a multiple select, I encountered an issue. Although all the items are being selected, they are not highlighted when clicking on the select all button. Below is the code snippet: <div class="label_hd">Profiles* {{ ...

javascripthtmlcssangularjs

How can I apply a border to individual table cells in HTML without affecting the entire table?

Struggling to apply a border on table cells, especially when using rowspan. Desiring a table layout with 4 cells - one large cell on the left and three smaller cells on the right side of it. Below is the code snippet I attempted: jsfiddle[dot]net/1fv4dz ...

htmlcsshtml-table

Dynamic styling updates on page refresh in Next.js

There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...

javascriptcssreactjsmaterial-uinext.js

Is there a way to align these buttons in the middle?

I am currently designing a webpage at The challenge I'm facing is: How can I center those buttons on the page? They need to remain centered and responsive even when the page is resized. Additionally, the spacing between the buttons is inconsistent. ...

htmlcsstwitter-bootstrapbuttonresponsive-design