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

At which location within the script should I insert the document.title in order to update the title every xx milliseconds?

I have been working on a script that refreshes certain #id's. Additionally, I would like to update the page title, which involves some flask/jinja2. I've attempted placing document.title = {% block title %} ({{online_num}}) Online Players {% en ...

javascriptjqueryajaxflaskjinja2

Setting the minDate for a jQuery Calendar Picker

I am currently working with two date pickers, which are described below: Date Picker 1: txtDate HTML: Date : <input type="text" id="txtDate"/> JQuery: $(function() { $("#txtDate").datepicker({ changeMonth : true, chang ...

jquerydatepicker

Error: The Vuex store is not defined in the Vue.js component when attempting to access it using

I've recently set up a new vue-cli webpack project with Vuex. I have initialized my Vuex store in store.js like so: import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({ state: {} }); export default store; ...

javascriptvue.jsvuex

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

javascripthtmljquerycss

I am in need of a blank selection option using an md-select element, and I specifically do not want it to be

I'm currently utilizing Angular Material with md-select and I am in need of creating a blank option that, when selected, results in no value being displayed in the select dropdown. If this blank option is set as required, I would like it to return fal ...

javascripthtmlangularjsangularjs-materialmd-select

Retrieve the header tag from API using Nuxt

I am trying to dynamically set OG:Tags using an API head() { this.$axios .get(`............`) .then((response) => { this.og_title = response.data.message.course.course_name; this.og_description = response.data.message.course.description; ...

javascriptvue.jsnuxt.js

What steps do I need to take to successfully integrate Font Awesome 5 with React?

Here is an interesting scenario: the initial icon is displayed, but it fails to update when the class changes. const Circle = ({ filled, onClick }) => { const className = filled ? 'fas fa-circle' : 'far fa-circle'; return ( ...

javascriptreactjsfont-awesomefont-awesome-5

iOS is causing AJAX to not trigger the PHP mailer on submission

contentString = 'input=details'; jQuery.ajax({ cache: false, type: "POST", headers: { "cache-control": "no-cache" }, url: "https://example.com/data/mailer.php", data: contentString, succe ...

phpjqueryajaxmailer

Leveraging the power of Firebase and JavaScript to easily include custom user fields during the user

UPDATE: I encountered an issue while using Nextjs framework. However, it works perfectly fine when I use a vanilla CRA (Create React App). It appears that the problem is somehow related to Nextjs. I'm currently working on creating a new user document ...

javascriptfirebasegoogle-cloud-firestorefirebase-authenticationnext.js

Flexbox allows you to easily manage the layout of your website

I am currently working on a CSS project and have encountered an issue. Whenever I apply the "display: flex" property to the .student element, the border around it mysteriously doubles. The reason for wanting to use the flex property is to align the text ve ...

htmlcssflexbox

Which specific indexOf method is the most appropriate for my use case?

While exploring a codebase, I came across this code snippet that adds the indexOf function: if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments ...

javascriptjquery

Activate hover effect on desktop screen (excluding tablets and phones) by utilizing media queries

Applying hover state styling to a div can be done like this: div { &:hover { color: red !important; border: 3px solid red !important; } } To exclude iPads and other tablets from this CSS style, you can util ...

htmlcssipadlessmedia-queries

"Implementing a dynamic way to assign values to different item types in React

There is an object with multiple values inside: const [sort, setSort] = useState({ "city": [], "price": [], "year": [] }); When the "add" button is clicked, the "city" value should be updated to include certain va ...

javascriptreactjsarraysobject

What are some strategies for sorting information from a list that is constantly changing?

I have been working on a web application built in asp.net that receives data from a web service in JSON format. The current task is to dynamically develop controls for this application. I achieved this by creating a list of labels with stored values using ...

c#javascriptjqueryhtmlasp.net

Is it possible to verify the presence of an ID with jQuery?

Is it possible to check for the existence of the id 'input-name' before assigning a value to the variable name using a line of code similar to this: var name = $('#input-name').attr("value"); In case the id 'input-name' does ...

javascriptjqueryhtml

The function this.$set is failing to update an array in VueJS

I am facing an issue where the console log shows me the updated array xyz, but when I try to print it in the DOM using {{xyz}}, it does not update. Can anyone shed some light on why this might be happening? data() { return { xyz: [] } }, met ...

javascriptarraysvue.jsvuejs2

Ways to detect the use of vue.js on a webpage without relying on vue-devtools

One way to determine if the page is utilizing Angular or AngularJS is by inspecting window.ng and window.angular. Is there a similar method to identify whether Vue is being used on the page directly from the console, without relying on vue-devtools? ...

javascripthtmlvue.js

Populate an HTML select with data as users click the create button

Encountering an issue when loading data into an HTML select after users press or click a button. The situation is as follows: A button is available to create another button dynamically Upon clicking the created button, a form is displayed Once the form i ...

phpjquerymysqlhtmlajax

Switch div and expand/shrink the rest

Apologies for what might seem like a trivial question, but after working for a few hours now, I'm finding it difficult to wrap my head around this. My initial instinct is to handle this by manipulating the entire div structure with JavaScript, but I c ...

javascriptjqueryhtmlcsstwitter-bootstrap

Several features - Second function malfunctioning

The initial inquiry is effective. However, the subsequent one is encountering issues as it is failing to confirm if an email contains the "@" symbol. My attempted solution involved reordering the functions related to email validation. <body onload="ch ...

javascripthtml