When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the Javascript.

Below is the Javascript code that is functioning correctly:

titles.forEach(titles => {
    document.getElementById(titles).style.backgroundColor = "#7dd5f8";
    document.getElementById(titles).style.color = "black";
});

Unfortunately, the following CSS code is not achieving the desired effect:

.titles:hover {
    border: 1px solid black;
    background-color: #a0e1fa;
}
javascriptcss

Answer №1

Give it a try, the results should be successful.

I made a small adjustment in the CSS by adding a single class.

.titles:hover{
border: 1px solid black;
background-color: #a0e1fa !important;}

.bg_7dd5f8 { background-color: #7dd5f8;  }

Below is the JavaScript code:

 titles.forEach(titles => {
    document.getElementById(titles).classList.add('bg_7dd5f8 ');
    document.getElementById(titles).style.color = "black";
});

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

Is there a way to display the button only when the user is able to enter an email in the input field?

I have a form for users to update their profile and a button to delete their account. I want the delete account button to only be visible if the user enters their email. $(document).ready(function() { var user_email = $('input[name="emp_email"]&a ...

javascripthtmljquery

"Upon invoking the console log, an empty value is being returned when attempting to access the

Why is console.log returning a blank line when trying to retrieve the value of a text input variable? HTML <label for="subject">Subject</label> <input type="text" id=" ...

javascripthtmlforms

jQuery Waypoints Error: The sticky functionality is missing and cannot be utilized in this context

Trying to anchor an element at the top of a WordPress page using the jQuery Waypoints plugin. <script src="path/to/waypoints.min.js"></script> <script> $('#myelement').waypoint('sticky'); </script> However, t ...

javascriptjquerywordpressjquery-waypoints

Combine two arrays that have been transformed using mapping in JavaScript

Is there a way for me to utilize the useState hook in order to save and combine two arrays? I have managed to individually fetch and store values from the one and two arrays, but I am struggling to concatenate them into a single array. My ultimate goal i ...

javascriptreactjsreact-hooksmapping

JavaScript can be used to call a web service directly from a content page

Is there a way to call an autocomplete webservice from JavaScript in a content page that is part of the same web app? I have found that when I include a master page, the autocomplete feature stops working. I haven't added a script manager to the maste ...

javascriptjqueryasp.net

The MUI classes in my React project differ between the local and live versions, creating inconsistency in styling

I've encountered a discrepancy in the Mui classes used in my React project between the local and live versions. For instance: Localhost MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmal ...

javascriptreactjsmaterial-uimui-x-data-grid

When you access the `selectedIndex` property in JavaScript, it will return an object of type `HTMLSelect

I am currently working on a piece of code that retrieves the value from dropdown list items and then displays it in the document. To proceed, please select a fruit and click the button: <select id="mySelect"> <option>Apple</option ...

javascriptdocument.writeselectedindex

Tips for modifying the background color of an individual page in Ionic 3 and above

https://i.stack.imgur.com/t2mDw.pngI am just starting with Ionic and I'm attempting to modify the CSS of a single page by changing the background color to something different, like green, for example. I know that I can make global changes, but in this ...

javascriptangularionic-framework

Sending state data in an Axios POST request

I'm trying to include a state in an axios post request to send data to my backend, but I'm getting an error saying the state I selected is not defined. Here's the code snippet: React frontend import React, { Component } from "react&qu ...

javascriptreactjsexpressaxios

What could be causing the double invocation of render() in ReactNative?

I'm currently working on an app with a single screen displaying a map centered on the user's current coordinates. In my code below, I've set the latitude and longitude to null in the state of the App component. Using the componentDidMount() ...

javascriptreactjsreact-native

What is the best way to generate a live map with constantly updating markers?

Is it possible for me to learn how to develop a live map similar to the one on this site: www.lightningmaps.org? It's fascinating to watch new markers pop up every few seconds. I'm interested in building a real-time map that can track IP locatio ...

javascriptphpajaxgoogle-mapsreal-time

Having difficulty in displaying database values in HTML modal using PHP

On my PHP page, I have a setup that displays data based on the fetched id from the URL. Everything is working smoothly, but when I click a button to show a modal with additional information, the modal appears blank. Here is the code snippet I am using: ...

javascriptphphtmlmysqlsql

Have you ever wondered why the React HeroIcons architecture includes React.createElement instead of simply returning plain SVG elements?

As I integrate HeroIcons into my Next.Js app, I find myself pondering over how they have structured their package architecture. The way they return icons is like this: const React = require("react"); function ArchiveIcon(props, svgRef) { retur ...

javascriptreactjssvgnext.jsheroicons

Utilizing a library across various files in Node.js

I am looking to integrate Winston for logging in my nodejs express project. Within my main file ( server.js ) I currently have the following code snippet: const winston = require('winston'); winston.level = process.env.LOG_LEVEL winston.log(&ap ...

javascriptnode.jsexpresswinston

What is the equivalent of Node's Crypto.createHmac('sha256', buffer) in a web browser environment?

Seeking to achieve "feature parity" between Node's Crypto.createHmac( 'sha256', buffer) and CryptoJS.HmacSHA256(..., secret), how can this be accomplished? I have a piece of 3rd party code that functions as seen in the method node1. My goal ...

javascriptnode.jsbase64

What is the best way to combine an array of objects into a single object in typescript?

Looking for some help with converting an array of objects into a single object using TypeScript. Here's the structure of the array: myArray = [ {itemOneKey: 'itemOneValue', itemTwoKey: 'itemTwoValue'}, {itemThreeKey: ' ...

javascriptarraystypescriptjavascript-objects

Learn the effective way to style ul elements within @mui/material/Menu using CSS

When the button is clicked, I want to apply the following styles to the ul: &.MuiList-root { padding-top: 0px; padding-bottom: 0px; } View the issue in action on this live sandbox: https://codesandbox.io/s/react-typescript-forked-tyd8n8?fil ...

cssmaterial-ui

AngularJS extension known as 'ngclipboard'

I've been attempting to utilize a plugin called ngclipboard in Angular, but something seems amiss as it's not functioning as expected. There are no error messages, however, the text from the input box is not being copied to the clipboard. To see ...

javascriptangularjs

vue.js libs requiring "new ..." are being scolded by eslint for their misspelling

When working with Vue libraries, such as Swiper, that require the use of 'new …' in the script section, I encounter ESlint errors no matter how I try to write it. Even though 'new ...' works perfectly fine in the frontend, ESlint cont ...

javascriptvue.jseslintswiper.js

Problem with dynamic page routes in Next.js (and using TypeScript)

Hi everyone, I'm currently learning next.js and I'm facing an issue while trying to set up a route like **pages/perfil/[name]** The problem I'm encountering is that the data fetched from an API call for this page is based on an id, but I wa ...

javascripttypescriptnext.js