I have
<div id="d1" class="hov"></div>
as well as
<div id="d2" class="hov"></div>
with the following CSS applied
.hov:hover{
background-color:#cde0c4;
cursor:pointer;
}
Is there a way to make both d1 and d2 hover at the same time when hovering on one of them? How can I achieve this?
To achieve this effect, you'll need to incorporate some Javascript code. Here's an example:
document.body.addEventListener('mouseover', function(event) {
if (event.target.classList.contains('hov')) {
[].forEach.call(document.getElementsByClassName('hov'), function(elem) {
elem.classList.add('hover');
});
}
});
document.body.addEventListener('mouseout', function(event) {
if (event.target.classList.contains('hov')) {
[].forEach.call(document.getElementsByClassName('hov'), function(elem) {
elem.classList.remove('hover');
});
}
});
Additionally, make sure to define a css class named hover that specifies the styling details for this interaction.
Check out this live demo: http://jsfiddle.net/1LkfbcLx/
Would you mind placing them both inside a div?
.container:hover .hov {
background-color: #cde0c4;
cursor: pointer;
}<div class="container">
<div id="d1" class="hov">NUMBER 1</div>
<br>
<div id="d2"class="hov">NUMBER 2</div>
</div>To expand on Kierans' idea, you have the option to use different classes for this task as well.
For instance:
<div class="container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
Then with CSS:
.container:hover .a,
.container:hover .b,
.container:hover .c {
background-color:#cde0c4;
cursor:pointer; }
This approach eliminates the need for javascript in a straightforward scenario. Example: [http://jsbin.com/nohawufoqa/1/edit?html,css,output]
An alternative method is to utilize a combination of script and custom CSS for achieving the desired effect. This solution has not been extensively tested, but theoretically should be effective.
Custom CSS:
.hov:hover, .active {
background-color:#cde0c4;
cursor:pointer;
}
Script Implementation:
$('#d1').hover( function() {
$('.hov').addClass('active');
}, function() {
$('.hov').removeClass('active');
});
When viewed from the back, the side is hidden as desired, but I am struggling to determine if it is visible from the renderer or camera. new THREE.MeshBasicMaterial({ map: new, THREE.TextureLoader().load('image.jpg'), side: THREE. ...
I'm currently facing an issue while trying to configure a 3D environment in Babylon.js. During testing, I used meshes generated through code. However, we aim to utilize blender models for the actual environment. When I import a mesh using the scene l ...
I'm utilizing bootstrap in an attempt to design the layout depicted below: https://i.sstatic.net/0w06U.png Here is a simplified version of my code: .curr { font-size: 12px; font-weight: 700; letter-spacing: .5px; } .price { -webkit-tap-h ...
I'm in the process of creating an HTML email using Python, MIMEMultipart, and SMTP. Since the HTML content is lengthy, I decided to store it in a separate HTML file. Now, my goal is to import this HTML file into my Python script (located in the same d ...
I am currently working on setting up an API endpoint in Next.js, specifically the following one: /api/products/[name]?keyword=${anykeyword}. To accomplish this, I understand that I have to create it within the pages/api/products/[name] directory in index ...
Here is the structure of the template used for the directive. Our code fetches data from a service which contains all the details of a specific individual. We display only the first name, last name, and either designation or company affiliation from that d ...
When using jQuery to change the css of an element, I've noticed that it can remove some previously specified css rules for that element. For example, .className, .className2, etc... { background-color: black; color : silver; } .className: ...
Create an Angular 2+ code snippet that will print asterisks (*) in a list on button click. When the button is clicked, it should add one more asterisk to the list each time. For example: Button Click 1 - Output: * Button Click 2 - Output: ** Button Cl ...
Here is a visual reference of what I'm attempting to achieve: https://i.stack.imgur.com/EoQYV.png I've been working on creating a carousel with cards, but I'm struggling to synchronize the button indicators with card advancement when clicke ...
Currently, I am attempting to create a post using jQuery.ajax instead of an html form. Below is the code I am using: $.ajax({ type: 'POST', // GET is also an option if preferred url: '/groups/dissolve/$org_ID', data: data, success: fu ...
With the use of ui-router, a state is created with a resolve function: .state('tab.social', { url: '/social/', views: { 'menuContent': { templateUrl: 'templates/social/tab-social.html', ...
I've been working on a React.js web app with Material UI components. The challenge I'm facing is with one specific component that handles the website management and displays a preview of custom content. This website, unlike the rest of the app, u ...
Previously, I attempted to install Node.js without any issues. However, this time around, I am encountering difficulties accessing the npm package. While I can successfully retrieve the version of Node.js after installation, attempting to check npm -v or w ...
My project is built with Ember using NPM and I utilize Git for version control. I am looking for a way to update or bump the package.json version before or during a Git commit. Is there a method to accomplish this? Should I be implementing Git hooks? ...
View the image of the issue by clicking the link below: https://ibb.co/ghR0nm I'm facing an issue with the side navigation bar where it doesn't go fully to the left and fails to extend all the way down the page vertically. I've tried adjus ...
Could someone provide assistance with a problem I've encountered? So far, I haven't been able to find any solutions. I'm trying to extract the text 'You are logged in as' from the following HTML using XPath. However, since there a ...
I am struggling with adjusting the line-height of row-based text content in HTML enclosed in <p> tags. The challenge I'm facing is that the text could vary in length, resulting in either one or two lines. If it's a single line, it should co ...
I am having a unique approach to sending emails using html. To combat the issue of image blocking by email providers, I have resorted to utilizing box-shadow to create the images I require. The strange thing is that it appears perfectly fine in the browser ...
This is how I've set up my webpage design. <div layout="column" layout-fill ng-controller="MainCtrl as mc"> <header> <md-toolbar md-scroll-shrink> <div layout="row" layout-align="center center" flex> ...
Recently, I came across a fantastic drag-and-drop library on GitHub that I decided to use. In my current project, I have created a view with three different buttons, each revealing a list when clicked at the same position but not simultaneously. However, ...