Tips for changing the CSS pseudo class of an HTML element with JavaScript?

Here's a code snippet I have:

const myDiv = document.querySelector("#myDiv");
myDiv.addEventListener("click", fct_Div);

function fct_Div(ev) {
    console.log(ev);
    if (ev.altKey === true) {
        myDiv.style["background-color"] = "blue";
    }
}

And the corresponding CSS:

        #myDiv {
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        #myDiv:hover {
            background-color: lightblue;
        }

I'm interested in changing the background color of #myDiv:hover.

Is there a way to achieve this?

Your assistance is appreciated.

Andreï

Answer №1

Here is an example of how you can achieve this:

#myDiv {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        --hover_background_color: lightblue;
    }

    #myDiv:hover {
        background-color: var(--hover_background_color);
    }

Then, in JavaScript:

document.querySelector("#myDiv").style.setProperty('--hover_background_color', "blue");

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

Discovering the method to extract a Specific Form Field value with JQuery

Recently, I encountered a form that looked like this: <form id="post_comment" action="cmt.php" method="post"> <input type="hidden" name="type" value="sub" /> <textarea id="body"></textarea> </form> To interact with the ...

What are some effective methods for drawing attention to newly added table rows?

Whenever I input new data into my table, the data does not get highlighted as expected. However, the existing data in the table gets highlighted with no issues. Can you please help me troubleshoot why my code is not functioning correctly? Thank you. The f ...

What are the steps to properly create an ordered list?

.book-summary ol { counter-reset: item ; } .book-summary ol li { margin-left:10px; margin-top:5px; display:block; } .book-summary ol li:before { content: counters(item, ".") " "; counter-increment: item; } <div class="book-summary"> ...

Parse the HTML document using an HTTP request to access the Document Object Model (DOM)

I am facing an issue with accessing elements of an HTML page through JavaScript. I have tried different methods, but I keep getting the error message: CORS header "Access-Control-Allow-Origin" missing. Here is the code snippet I tried: <!DOCTYPE html&g ...

Utilizing local storage functionality within AngularJS

I've been encountering challenges while trying to integrate local storage using ngStorage in my ongoing AngularJS project. Despite fixing what seems to be the root cause of data type problems and errors during debugging, issues persist. Here is the P ...

The base64 conversion for the image is overflowing from the upload image field in react-draft-wysiwyg

I have a functional react-draft-wysiwyg editor application that allows me to add images. However, I am currently encountering an issue which is detailed below: https://i.stack.imgur.com/HTjAc.png This is the code snippet of what I have attempted so far. ...

Utilizing setInterval for automatic page refreshing

I've been working on a setInterval function to continuously check for new comments, select them, and post them. While it's somewhat functional at the moment, it's not behaving exactly as I intended. Currently, what happens is that every thre ...

Experiencing difficulty aligning the Material UI grid to float on the right side

I'm currently in the learning phase of material-ui and encountering an issue with floating the grid content to the right side. Despite trying alignItems="flex-start" justify="flex-end" direction="row" in the container grid, as well as using the css p ...

Storing information in a database using Phantomjs

My app is built on phantomjs and here's how it currently operates: 1. A php script retrieves data from my postgres database as an array, 2. The array of data is then passed as an argument to a shell_exec command running a phantomjs script, 3. Phantomj ...

Searching for the precise error name being thrown in MySQL using Node.js

Currently, I am in the process of constructing a server using node.js (express) and mysql felix. The issue I am facing is that occasionally I encounter a duplicate error when running a certain query. I have exhausted all of my attempts to handle this err ...

Allow users to zoom in and out on a specific section of the website similar to how it works on Google Maps

I am looking to implement a feature on my website similar to Google Maps. I want the top bar and side bars to remain fixed regardless of scrolling, whether using the normal scroll wheel or CTRL + scroll wheel. However, I would like the central part of the ...

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

I'm trying to incorporate a lightbox for video playback on a specific page of my CMS. I've placed my CSS file in JS/MY THEME/JQUERY/PLUGIN/VENOBOX/CSS/myfile.css and the JS files in JS/MY THEME/jquery/plugins/venobox/js/myfile.js, but it doesn&ap ...

Im testing the creation of a global style using styled-components

Is there a way to create snapshot tests for styled-components with createGlobalStyle? The testing environment includes jest v22.4.4, styled-components v4.1.2, react v16.7, jest-styled-components v5.0.1, and react-test-renderer v16.6.3 Currently, the outp ...

Iframe displaying a blank white screen following the adjustment of document.location twice

I am in the process of developing a web application that I intend to integrate into my Wix website. The main components of the required web application are a text screen and a button to switch between different screens/pages (html content). However, I am ...

What is the best way to show the initial image within every div that has the class name .className?

I am looking to only show the first image in each div with the class name "className." This... <div class="className"> <p>Yo yo yo</p> <p><img src="snoop.jpg" /></p> </div> <div class="className"> Hel ...

From transitioning from a radio button's checked indicator to a complete button

I'm in the process of customizing my WordPress plugin and seem to be struggling with styling the radio buttons. For reference, you can find the code snippet here: https://jsfiddle.net/cd3wagvh/ The goal is to conceal the radio buttons and modify the ...

Having trouble aligning photos in the grid

I am facing an issue aligning my menu and image grid. The grid is inline-block but the first item stays stuck in the upper right-hand corner no matter what I do, without affecting the navigation menu placement. Additionally, when testing locally, everythin ...

Utilize JavaScript to append a CSS class to a dynamic unordered list item anchor element

I am working with a list of ul li in a div where I need to dynamically add CSS classes based on the click event of an anchor tag. Below is the HTML structure of the ul li elements: <div class="tabs1"> <ul> <li class="active"> ...

What might be causing the navigation to malfunction in Firefox?

Could you please help me identify the issue with the navigation on this website? It seems to work correctly on webkit, but not on firefox! Intended vs actual ...

Struggling to make @font-face function properly

I am attempting to incorporate a custom font into my website. In my CSS file, I have the following: body { font-family: HurmeGeometricSans4_SemiBold; } @font-face { font-family: HurmeGeometricSans4_SemiBold; src: url(resources/Hurme_Design_-_ ...