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

What is the best way to perform a redirect in Node.js and Express.js following a user's successful login

As I work on developing an online community application with nodejs/expressjs, one persistent issue is arising when it comes to redirecting users to the correct page after they have successfully signed in. Despite reading several related articles and attem ...

javascriptnode.jsapiexpresserror-handling

Is there a way to link the req.session.user from express-session to a chai-http request?

When it comes to my API, it relies on the express-session module for authentication. Each request is verified based on whether the req.session.user object exists within the request. The implementation can be seen in the snippet below: app.use(function(req ...

javascriptnode.jsexpresschaiexpress-session

Dealing with problematic hover behaviors in Cypress: A guide

I encountered an issue with Cypress hover functionality while trying to access a sub menu that appears after hovering over a main menu item. The error message I received was This element is not visible because it has CSS property: position: fixed and it&ap ...

javascriptjquerycsscypress

How to manage rejections in async/await within the Array#map method

In my Node 8.1.2 project, I encountered a scenario where one file is calling another file's function within a map structure. While in a real example, I would normally use Promise.all on the map, that specific implementation is not the focus of this qu ...

javascriptnode.jsexpressasynchronous

What is the best way to enable a DOM element's height to be resized?

I have a widget displayed in the corner of my browser that I would like to make resizable by dragging the header upwards to increase its height. The widget's position remains fixed with its bottom, left, and right properties unchanged, but I need the ...

javascripthtmlcssresizablejquery-resizable

Clicking on a flex card will trigger the opening of a new page where the parsed data will be displayed in a stylish manner using JavaScript

Currently, I am attempting to showcase the data retrieved from the following URL: . My objective is to format the parsed data with a specific style. However, I have encountered difficulties accomplishing this using `window.open()`. Any assistance in resolv ...

javascriptjqueryhtmlcss

Having trouble getting your AngularJS code to work?

Recently, I decided to experiment with AngularJS and started working on a new project. Below is the HTML code I wrote: <div ng-app ng-controller="nameController"> <input type="text" value="Jack" ng-model="fname" /> <input type="tex ...

javascripthtmlangularjs

Is it possible to send multiple HTML input values to a Google Spreadsheet using only JavaScript?

Seeking a faster and more efficient way to send the values of multiple HTML Inputs to a specific location in a Google Spreadsheet? The existing script takes too long to complete, often skips inputs, and relies heavily on "google.script.run". Due to softwar ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

When scrolling, use the .scrollTop() function which includes a conditional statement that

As a newcomer to jQuery, I've been making progress but have hit a roadblock with this code: $(window).scroll(function(){ var $header = $('#header'); var $st = $(this).scrollTop(); console.log($st); if ($st < 250) { ...

javascriptjqueryhtmlcsshover

Looping through an array asynchronously and returning the result

I'm having some trouble with an asynchronous loop. Here's the code I've been working with: let items = []; data.forEach(async item => { var newItem = new Item(data); newItem.options = await this.fetchOptions(data[" ...

javascriptnode.jsasynchronousasync-await

Images with fadeIn-Out effect on a slide restrict the movement of the div

I am currently working on a project where I have a div named "background" containing 4 images (400x300px) that fade in and out in a row every x seconds. The issue I am facing is that these images are displaying on the top-left of the browser, and I am tr ...

javascriptjquerycss

Unable to locate the node module within the Rails stimulus controller

I'm facing an issue with integrating my own npm package into a Rails application that I have developed. It's unclear whether the problem lies in the creation of the node package or within the rails app itself. The package in question is fairly ...

javascriptruby-on-railsnpmwebpacker

Eslint in Gulp can't locate my .eslintrc configuration file

My gulp-eslint is unable to locate my .eslintrc file. I've set up a lint task as follows: gulp.task('lint', function () { gulp.src(['src/**/*.js', 'src/**/*.jsx']) .pipe(eslint()) .pipe(eslint.format()); }) The t ...

javascriptnode.jsgulpeslint

What method is most effective for duplicating objects in Angular 2?

Is it just me, or does Angular 1.x have methods on the global angular object like angular.copy and angular.shallowCopy that are missing in Angular 2? It seems like there is no equivalent version in Angular 2 documentation. If Angular 2 doesn't plan on ...

javascriptangularjsangular

Prevent horizontal HTML scrolling while displaying a layer

I am currently working with a .layer div element that darkens the page to highlight a modal. However, I have encountered an issue where upon triggering the event, the div does not occupy 100% of the screen and the original browser scroll bar disappears. I ...

javascriptcss

Iterate through the array to verify that the specified conditions are satisfied for each individual item

I am working with an array of items and need to check if they all meet specific criteria. I've created a for loop to iterate through the array, but I'm concerned about its efficiency. Is there a more optimal way to achieve this? let match = 0; ...

javascriptarrays

Encountering a "400 Bad Request" error when using Ajax within WordPress

I've been trying to submit a form using Ajax within a plugin. I had two plugins, the first one was initially working but has stopped now and I can't seem to find any errors. I don't think the issue lies in the code itself, but I'm feeli ...

javascriptphpjqueryajaxwordpress

Cannot find JS variable after loop has completed

I am struggling to understand why the value of my variable is not changing in my function. Here is my code snippet: var count = function(datain){ let temparr = [], countobj = {}; $.each(datain, function(key, val) { console.log(temparr); cou ...

javascriptjqueryajaxloops

After an ajax call in ASP .NET MVC3 using Razor, jQuery may not function properly

When I perform a post back to obtain a partial view using ajax, I utilize the following code to render the partial view within a div named 'DivSearchGrid'. <script type ="text/javascript" > $('#Retrieve').click(function ( ...

javascriptasp.net-mvc-3jquery

Vue's watch feature will not execute if the watched property remains unchanged during a page reload

<template> <!-- The navbar has a property for gender, the color of the navbar will change depending on the gender --> <!-- pass the props gender through a form submission and event --> <div class="nav-main" :class="{f ...

javascripthtmlvue.jsvuejs3