Transform a div's style when hovering over another div using absolute positioning without repetition

I am facing an issue with multiple divs positioned absolutely on top of a primary div with relative positioning. I want one specific div to change its background-color when hovering over another div within the same parent div.

Though I know about adjacent-div classes, they do not seem to work in this case (possibly due to absolute positioning).

I have provided a snippet of my code below (the actual code is much longer). What would be the best approach to modify the width and color of m2wrap-back when hovering over m2wrap-hover (which overlays other divs completely)?

If using CSS alone is not feasible, I am open to a jQuery solution as well.

<div class="m2wrap">
  <div class="m2wrap-back">
    <h3 class="m2wrap-back-title">Title</h3>
  </div>
  <h3 class="xhfb-text"> Some text here.. </h3>
  <div class="m2wrap-bz1"></div>
  <div class="m2wrap-bz2"></div>
  <div class="m2wrap-hover"></div>
</div>
<style>
.m2wrap {
    position: relative
}
.m2wrap-back {
    position: absolute;
    top: 15px;
    left: 0;
    width: 110px;
    height: 0;
    text-align: center;
    vertical-align: middle;
}
.m2wrap-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 4px;
    opacity: 0.6;
    cursor: pointer;
}
div.m2wrap-hover:hover {
    background-color: #bf0000;
}
</style>
javascriptjqueryhtmlcss

Answer №1

To achieve this effect, you cannot rely solely on CSS with your current HTML structure. You will need to incorporate JavaScript or jQuery for the desired functionality.

For example:

$('.m2wrap-hover').hover(function() {
  $(this).closest('.m2wrap').find('.m2wrap-back').addClass('hover');
}, function() {
  $(this).closest('.m2wrap').find('.m2wrap-back').removeClass('hover');
})
.m2wrap {
    position: relative
}
.m2wrap-back {
    position: absolute;
    top: 15px;
    left: 0;
    width: 110px;
    height: 0;
    text-align: center;
    vertical-align: middle;
}
.m2wrap-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 4px;
    opacity: 0.6;
    cursor: pointer;
}
div.m2wrap-hover:hover {
    background-color: #bf0000;
}
.m2wrap-back.hover {
  width: 120px;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m2wrap">
  <div class="m2wrap-back">
    <h3 class="m2wrap-back-title">Title</h3>
  </div>
  <h3 class="xhfb-text"> Some text here.. </h3>
  <div class="m2wrap-bz1"></div>
  <div class="m2wrap-bz2"></div>
  <div class="m2wrap-hover">hover here</div>
</div>

If you prefer to use pure CSS without JavaScript, consider rearranging the order of your elements as follows:

.m2wrap {
    position: relative
}
.m2wrap-back {
    position: absolute;
    top: 15px;
    left: 0;
    width: 110px;
    height: 0;
    text-align: center;
    vertical-align: middle;
}
.m2wrap-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 4px;
    opacity: 0.6;
    cursor: pointer;
}
div.m2wrap-hover:hover {
    background-color: #bf0000;
}

.m2wrap-hover:hover + .m2wrap-back {
    width: 120px;
    color: red;
}
<div class="m2wrap">
  <h3 class="xhfb-text"> Some text here.. </h3>
  <div class="m2wrap-bz1"></div>
  <div class="m2wrap-bz2"></div>
  <div class="m2wrap-hover">hover here</div>
  <div class="m2wrap-back">
    <h3 class="m2wrap-back-title">Title</h3>
  </div>
</div>

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

Send user a notification upon detecting changes in the database - using JavaScript and AJAX!

Hey there! I'm diving into the world of JavaScript and AJAX for the first time, and I could really use some guidance on a particular issue. I'm looking to implement a feature where the user is notified whenever there is a change in a value of a ...

javascriptmysqlajax

Storing Json data in a variable within Angular 2: a step-by-step guide

Within the params.value object, there are 3 arrays containing names that I need to extract and store in a variable. I attempted to use a ForEach loop for this purpose, but encountered an issue. Can you spot what's wrong? var roles = params.forEach(x ...

javascriptarraysangulartypescript

What is the best method for populating a text area in Pharo with HTML content?

When logging in through Pharo using an HTML form, you can utilize the method of Znclient called formAt:add: followed by a post. I'm interested to know how I can fill a textArea in an HTML form and then make a post request. Is there a specific method f ...

htmlsmalltalkpharopharo-5

What is the best way to handle a JavaScript POST request in an ASP.NET WebForm?

Although it may seem like a basic question, I am a bit rusty when it comes to webforms. This is my first time using Stripe.js and I would like to utilize it alongside stripe.net for client-side processing. Below is the client code: <%@ Page Title="" La ...

c#javascript.netwebformsstripe-payments

Any tips on silencing webpack's constant nagging about the "Critical dependency: require function is used in a way..." warning message?

My immediate goal is to resolve this warning. However, it seems that a different approach may be necessary. I have developed an npm library for date/time functions with most of the code being general-purpose and compatible with both Node.js and web browse ...

javascriptnode.jstypescriptwebpackbrowser

How to generate a dropdown menu using a deeply nested JSON array

I'm looking to create a series of drop-down lists based on the JSON array provided below. There will be five drop-down lists, and when I select an option in one list, the other four should populate accordingly. For example, if I choose "Hindi" in the ...

javascriptjqueryjson

What is the process for transferring my jQuery-generated XML to a PHP array?

Hey there, I'm new to PHP and currently trying to understand how to pass an array method to another array in PHP. The code I have creates XML with values every time an action is performed. My goal is to send this data to a PHP array for later use in a ...

phpjqueryxml

Why does the browser keep converting my single quotation marks to double, causing issues with my JSON in the data attribute?

This task should be straightforward, but I seem to be facing a roadblock. I am trying to insert some JSON data into an input's data attribute, but the quotes in the first key are causing issues by prematurely closing the attribute. Here is the code ...

javascriptjqueryhtmljson

Creating a Mondrian-inspired design using a combination of red, blue, and yellow within an HTML table

Is there anyone who can assist me in recreating this painting using HTML <table> tag and CSS within a browser? The image to replicate: https://i.stack.imgur.com/84y4I.jpg I attempted to complete this task, but my instructor is dissatisfied with th ...

htmlcss

ng-bind-html not refreshed following ng-click triggering

Recently, I started learning about the MEAN stack. I have implemented an ng-repeat in my HTML code that displays a list of titles. Each title has an ng-click function attached to it, which is supposed to show more details in an overlay popup. blogApp.co ...

javascripthtmlangularjs

Having trouble updating state with useEffect in a React functional component

Currently, I am dealing with a React functional component that is calling an API to fetch data. The response from the API call is confirmed to be received successfully. My aim is to store this data in an array within the component's state so that it c ...

javascriptreactjstypescriptreact-native

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

I’m having trouble with mxgraph’s getPrettyXml() not capturing the value of Custom elements. In my customized template, it looks like this: <add as="symbol"> <Symbol label="Symbol" description="" href="" data="{[hi :bill]}"> &l ...

javascripthtmlmxgraph

AngularJS ng-repeat with dynamic ng-model is a powerful feature that allows for

I am attempting to dynamically generate the ng-model directive within an ng-repeat, but I am encountering a browser error. Our goal is to dynamically retrieve attributes of a certain type and set them in the DOM. The specific error I am receiving is: Err ...

javascriptangularjsangularjs-ng-repeatdynamically-generatedangularjs-ng-model

Swap out original source files in HTML with minified versions

I have successfully utilized a maven plugin to create a minified and compressed version of my CSS and JavaScript files. Now, I am looking to update the section in my main HTML page that currently loads all those individual files. Here is what it looks lik ...

javascriptcssmaven

Using AJAX to dynamically populate PHP form inputs from HTML

I'm trying to create a simple HTML form where users can input their information and have it sent to a PHP file using JavaScript with AJAX. However, I'm encountering an issue where the values from the form are not being included in the email that ...

javascriptphphtmlajaxforms

Transform the query results into clickable links

Is there a way to automatically turn specific results fetched from a MySQL $row into hyperlinks? For example, if I fetch the website Google.com in a search query, is there a method for making it an active hyperlink that goes directly to Google.com when cli ...

phphtml

Guide on Importing All Functions from a Custom Javascript File

As a beginner in learning Angular, I am faced with the task of converting a template into Angular. However, I am struggling to find a solution for importing all functions from a custom js file into my .component.ts file at once. I have already attempted t ...

javascriptangulartypescript

Which RxJS operators necessitate unsubscription?

It can be confusing to know which operators in RxJS must be unsubscribed from to prevent subscription leaks. Some, like forkJoin, complete automatically, while others, such as combineLatest, never complete. Is there a comprehensive list or guideline availa ...

javascripttypescriptrxjs

Having difficulty resolving issues with the chat box (div) scroll bar staying fixed at the bottom

I am currently working on a chat application and I am facing an issue with fixing the scroll bar at the bottom of a div when loading my PHP file. I have already written a script to achieve this, but despite accessing it using CSS Id, I am having trouble ge ...

javascriptphpjqueryhtmlcss

Utilizing Google Caja for JavaScript sanitization is the only way to ensure

Looking to safeguard the inputs provided to a nodejs server with the assistance of the google-caja sanitizer. However, it's somewhat overzealous and cleanses away the > and < symbols too. My project requires me to retain html characters in the ...

javascriptnode.jsexpress