Is there a way to add a class to an element when hovering over it in an array of elements?
Is there a way to add a class to an element when hovering over it in an array of elements?
Iterate over each element in the array and attach an event listener for mouseover that applies a specified class.
const elements = document.querySelectorAll('div');
const designatedClass = 'highlight';
elements.forEach(item => item.addEventListener('mouseover', () => {
item.classList.add(designatedClass);
}))div {
height: 100px;
width: 100px;
border: 1px solid;
}
.highlight {
background-color: yellow;
}<div></div>
<div></div>
<div></div>
<div></div>If you have multiple elements with different ids or classes, you can try the following approach.
let elements = ['#hud-menu', '#hud-intro', '.hud-shop', '.hud-settings'];
document.querySelectorAll(elements).forEach(item => {
item.addEventListener('mouseover', () => {
item.classList.add('blue');
});
});div {
height: 100px;
width: 100px;
border: 2px solid;
border-radius: 10px;
text-align: center;
}
.blue {
background-color: blue;
}<div id="hud-menu">Hud Menu</div><br>
<div id="hud-intro">Hud Intro</div><br>
<div class="hud-shop">Hud Shop</div><br>
<div class="hud-settings">Hud Settings</div>If you'd like to remove the added class when hovering over an element stops, you can implement the mouseout event as shown in the example below.
let elements = ['#hud-menu', '#hud-intro', '.hud-shop', '.hud-settings'];
// Add class on mouseover
document.querySelectorAll(elements).forEach(item => {
item.addEventListener('mouseover', () => {
item.classList.add('blue');
});
});
// Remove class on mouseout
document.querySelectorAll(elements).forEach(item => {
item.addEventListener('mouseout', () => {
item.classList.remove('blue');
});
});div {
height: 100px;
width: 100px;
border: 2px solid;
border-radius: 10px;
text-align: center;
}
.blue {
background-color: blue;
}<div id="hud-menu">Hud Menu</div><br>
<div id="hud-intro">Hud Intro</div><br>
<div class="hud-shop">Hud Shop</div><br>
<div class="hud-settings">Hud Settings</div>I'm having difficulty trying to replicate the first-level (director) box with a vertical line in between. The original chart only has one level with subs below. Take a look at the image provided to see the desired outcome... You can find the CodePen ...
Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover ov ...
I am facing an issue with the functionality of two dropdown menus. The options in the second dropdown are supposed to be shown based on the selection made in the first dropdown. While this feature works perfectly in Chrome, it seems to be malfunctioning i ...
After creating a Datagrid using jTable, I have included my JavaScript code in twig: <script type="text/javascript> $(document).ready(function () { jQuery('#grid').jtable({ title: 'Table of products', ...
I am facing a challenge where I need to dynamically add varying numbers of elements to a dialog window each time it is opened. Below is the code I am working with: CKEDITOR.on( 'dialogDefinition', function(ev) { var dialogName = ev.data.name ...
Encountering an issue with a cross-domain ajax call in IE10 (in IE10 mode, not compatibility). Situation: Two domains involved, http://a and http://b. Cookie set for http://b. Currently on page http://a. Goal is to make a CORS request to http://b using X ...
Here are two codes utilized by my platform to establish relationships between nodes. code1 : const getNodeRelationship = (node1, node2) => { // if node1 and node2 are the same node if (node1 === node2) return null; // check direct parent ...
Here is the data I am working with: singlePost?.Comments = [ 0: {id: 82, content: "Parent1", responseTo: null} 1: {id: 83, content: "Child1", responseTo: 82} 2: {id: 84, content: "Parent2", response ...
Having some trouble integrating the react epub reader with Next Js. It's working perfectly fine with react js, but I keep encountering an error. Can you help me figure out how to integrate the epub reader with next js? Here is the error This is my ...
One of the challenges I'm facing involves loading and storing a model using $resource in AngularJS. This particular model is an aggregate with nested collections, which are displayed in an HTML view using ng-repeat. The structure of the model looks l ...
https://i.stack.imgur.com/q7tMT.png Upon selecting an option from a dropdown within a table row, I make a call to an API to fetch a list of strings into another dropdown field for that specific row. However, the entire column is being populated with that r ...
When the glyphicon is clicked, I want the entered content to be added dynamically to the textarea. $(document).ready(function(){ //Click Event of glyphicon class $(document).on('click','.glyphicon',function(){ ...
My pagination numbers are functioning correctly, but I'm having trouble with my "next" or "previous" buttons. I am using Bootstrap 5 and jQuery to load cards from an array. The issue seems to be with the currentPage variable in my displayList function ...
After setting up my express project using express-generator, I decided to make it work with a cloudflare SSL Certificate for secure browsing over https. My express app is running on port 443. Despite my efforts, when I try to access the domain, I encount ...
I have successfully designed the layout and added icons, but I am facing difficulty in creating connecting lines between them. I attempted to utilize CSS borders and pseudo-elements, yet I cannot achieve the desired outcome. If anyone could offer a CSS-ba ...
Greetings all! I am a beginner with CSS and currently working on my website. You can check it out at this link. I am facing an issue where the image on my site is not fitting properly and it keeps repeating. Can anyone guide me on how to fix this using CS ...
Check out the jsFiddle code here: <div ng-app=""> <div ng-controller="FirstCtrl"> <input type="text" ng-model="data.message" /> {{data.message + " world"}} </div> </div> function FirstCtrl($scope) { ...
Imagine you have the following HTML code: <button id="click-me" type="button">Click Me!</button> Now, picture this jQuery snippet being executed: var button = $('#click-me'); button.on('click', function() { console.l ...
Check out this simple fiddle I've created. It should display an alert when you press enter in the textbox. The functionality works in the latest versions of IE and Chrome, but not in Firefox: fiddle Here's the HTML code: <div ng-app="app" ng ...
I have a situation in my forms where arrays are being sent back in the following format: <input class="checkbox-service" name="services['electricity']" type="checkbox"> <input class="checkbox-service" name="services['water'] ...