Reset hover effect upon exiting the current website

Hey there! I am currently dealing with an interesting situation regarding a link styled as a button on my website.

<a href="http://externalsite" class="button" target="_blank">go to external site</a>

Additionally, I have applied a hover effect to this button class, which looks like this:

.button {
  background-color: green;
}

.button:hover {
  background-color: red;
}

Everything seems to be working fine as expected, with the button turning red when hovered over. However, I have noticed that in certain browsers, the hover effect seems to stick even after clicking the button and returning to my website.

For example, in my version of Chrome (47.0.2526.80), after clicking on the external link and then coming back to my site, the button remains red until I move my cursor over it again. This behavior seems to be specific to Chrome. Has anyone else encountered this issue? Could it potentially be a browser bug? I would appreciate any suggestions for a workaround to ensure a consistent user experience across different browsers.

htmlcssgoogle-chromehover

Answer №1

Hey there, I found that using focus really worked for me too :)

Check out this link to a codepen I made:

http://codepen.io/user123/pen/AbCdEf

.btn:focus {
  background-color: blue;
}

Answer №2

h2 { 
    font-size: 18px;
    color: blue;
}

Give this a shot - if it doesn't work, it might be a browser compatibility issue

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

Create a personalized message in PHP that corresponds to the specific row number

I created a table to show data sourced from a database. I decided to add a column that will display a message based on the row number being displayed. <form name="afisare1" method="POST" > <input type="submit" name="opt1" value="OK"/> ...

phphtmlmysql

Utilizing Bootstrap 5 to showcase a variety of images that adapt to different screen sizes

Using Bootstrap 5, I am attempting to utilize an img tag to showcase a different image depending on the device - mobile, tablet, or desktop. However, I am facing challenges in correctly setting the breakpoints for the wrapper divs using the display utiliti ...

htmlcsstwitter-bootstrapbootstrap-5

Using jQuery's .html function to insert images

I have a unique counter that counts in currencies, such as Yen and Euro. Each number, as well as the currency sign and separator, are all displayed on the webpage using custom-designed icons. I utilize the display: flex; property in my container div and ap ...

javascriptjquerycss

Drupal 7 FlexSlider - alignment issue with image placement

I am encountering an issue with the Flexslider module on my Drupal 7 website. I have created a simple slider that displays 3 photos. I enabled touch screen functionality for the slider, and everything seems to be working fine except for one problem - all t ...

jquerycssdrupaldrupal-7flexslider

Loading event in HTML5 video element is in progress

I'm interested in creating a loading animation for an html5 video, similar to the display on Youtube videos (reference: https://www.youtube.com/watch?v=5vcCBHVyG50) I attempted using the canplay event but I believe I may have misunderstood its true p ...

javascriptjqueryhtmleventsvideo

Ways to showcase INPUT TYPE when making a Selection?

I've been struggling with a simple issue and despite trying multiple solutions, I can't seem to get it right. I have a form where I'm using the <select> tag with two options: coo and uh. What I want is for an additional input type fiel ...

javascriptjqueryhtmlcssajax

Prevent your HTML tables from overflowing

I am attempting to create an HTML table with three columns, where I want the first and third columns to have a width of "auto" based on their content. The middle column should then take up the remaining space. While this setup works well when the content ...

htmlcsshtml-table

Differences between HTML and JSON data in AJAX response

Currently, I am facing a challenge in loading data on the frontend and displaying it. One option is to retrieve the data as a JSON object and generate HTML elements based on it. The alternative approach involves fetching HTML data directly from the backend ...

htmlajax

Retrieving a page using jQuery

Below is the JavaScript code that I am using: $.ajax({ url: "test.html", error: function(){ //handle error }, success: function(){ //perform actions here with the received data } }); After retrieving test.html, I am wo ...

javascriptjqueryhtmlcssajax

How can you modify a specific field using a modal form in Django?

Managing a form to track the entry and exit times of individuals in different areas can sometimes lead to discrepancies. For instance, if someone forgets to "leave" an area before entering a new one, a prompt is shown asking for an "estimate" of the time t ...

javascriptpythonhtmldjangomodal-dialog

Guide on making a JavaScript button with both "light and dark" modes

Currently, I am attempting to change the color scheme of the page by adjusting the :root variables using a function called changeBackgrondColor(). This function is then assigned to the fontAwesome moon "button". However, when I click on the moon, the pag ...

javascripthtmlcss

How to create HTML buttons with CSS that maintain proper proportions?

How can I ensure that my HTML buttons adjust proportionally to different screen sizes? I've been working on coding an Android app using HTML and CSS, and everything seems to be running smoothly. However, when I share the file with a friend, he compla ...

androidhtmlcssandroid-layoutmobile

Should I generate an array or pull data directly from the database?

Hey there, I've got this JavaScript app and could really use some input or tips. Here's the idea: Users log in to try and defeat a 'boss', with each player working together in the game. Let's say the 'boss' has 10 millio ...

javascriptphphtml

Deactivate interactive functions on the mat-slider while preserving the CSS styling

I'm attempting to create a mat-slider with a thumb label that remains visible at all times. Below is my mat-slider component: <mat-slider class="example-margin" [disabled]="false" [thumbLabel]="true" [tickInterval]="tickInterval" ...

javascripthtmlcssangularangular-material2

Arranging Bootstrap Cards in an Orderly Stack

I recently created a set of bootstrap cards displayed like this: <div class="card-deck"> <div class="card"> <img class="card-img-top" src=".." alt="Card image cap"> <div class="card-body"> <h5 cl ...

htmlcssbootstrap-4

Stylesheet for a React component

Why is the CSS code in my React component file not working even though I have imported it? import React from 'react'; import { Carousel } from 'react-bootstrap'; import './Banner'; ...

cssreactjs

Creating a Visual Presentation with Background Image Transition in HTML, CSS, and JavaScript

Seeking assistance in setting up a basic background image slideshow on my website. I have been unable to locate a suitable tutorial online, so I'm reaching out here for guidance. HTML: <body> <h3>Welcome!</h1> <p>Lorem i ...

javascripthtmlcssbackground-imageslideshow

Guide on making an SVG tooltip using the Menucool JS extension

I am trying to add a simple tooltip to an SVG "map" when the mouse hovers over a rectangle. To create the tooltip, I would like to utilize this specific plugin. Here is how I have connected the SVG to HTML: <object data="map.svg" type="image/svg+xml" ...

javascriptjqueryhtmlcsssvg

Incorporate text inside the border of a Material UI chip

https://i.stack.imgur.com/VATrD.png I'm looking to replicate this design using a pre-built Chip component from MaterialUI While the solution might involve Some Text using html and css, it still may not achieve an identical result. I've come acr ...

cssreactjsmaterial-ui

Automatically granting permission on Google Chrome pop-ups with Selenium and Java

After researching, I found a method for handling notifications in Google Chrome versions below 50 and another method for versions above 50. However, I am currently using Google Chrome 91. An answer on this topic can be found here: How to click Allow on Sh ...

javaseleniumgoogle-chromechrome-options