Swap the content of div1 with div2 when div2 is hovered over while positioned underneath div1

Question

Swap the content of div1 with div2 when div2 is hovered over while positioned underneath div1

Is it feasible to modify div1 if div2 is hovered but positioned beneath div1?

/* Works */
.div1:hover + .div2 {
  background-color: red;
}

/* Doesn't Work */
.div2:hover + .div1,
.div2:hover ~ .div1,
.div2:hover .div1 {
  background-color: red;
}

<div class="div1">hover</div>
<div class="div2">hover</div>

Any solutions utilizing Javascript and/or JQuery would be greatly appreciated

javascript jquery html css

Answer 1

Answer №1

Utilizing JQuery's .hover() along with .css() for styling both div elements

$( ".div1" ).hover(
  function() {
    $(".div2").css( "background-color", "red" );
  }, function() {
    $(".div2").css( "background-color", "initial" );
  }
);

$( ".div2" ).hover(
  function() {
    $(".div1").css( "background-color", "red" );
  }, function() {
    $(".div1").css( "background-color", "initial" );
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>

Answer 2

Utilizing JQuery's .hover() along with .css() for styling both div elements

$( ".div1" ).hover(
  function() {
    $(".div2").css( "background-color", "red" );
  }, function() {
    $(".div2").css( "background-color", "initial" );
  }
);

$( ".div2" ).hover(
  function() {
    $(".div1").css( "background-color", "red" );
  }, function() {
    $(".div1").css( "background-color", "initial" );
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>

Answer 3

Answer №2

If you prefer not to rely on javascript, an alternative is to utilize display: flex within the container and adjust the rendering order accordingly (taking into account that the html structure needs to be updated as well). This will allow you to hover over div2 and highlight div1.

.container {
  display: flex;
  flex-wrap: wrap;
}

.div1, .div2 {
  flex: 0 0 100%;
}

.div1 { order: 1; }
.div2 { order: 2; }

.div2:hover ~ .div1 {
  background-color: red;
}

<div class="container">
  <div class="div2">hover 2</div>
  <div class="div1">hover 1</div>
</div>

Answer 4

If you prefer not to rely on javascript, an alternative is to utilize display: flex within the container and adjust the rendering order accordingly (taking into account that the html structure needs to be updated as well). This will allow you to hover over div2 and highlight div1.

.container {
  display: flex;
  flex-wrap: wrap;
}

.div1, .div2 {
  flex: 0 0 100%;
}

.div1 { order: 1; }
.div2 { order: 2; }

.div2:hover ~ .div1 {
  background-color: red;
}

<div class="container">
  <div class="div2">hover 2</div>
  <div class="div1">hover 1</div>
</div>

Answer 5

Answer №3

Unfortunately, CSS does not have a selector for targeting the previous sibling element. In this case, you will need to utilize JavaScript. One option is to use jQuery's prev() method.

$(function() {
  $(".div2").hover(function() {
      $(this).prev().addClass("hoveredBg");
    },
    function() {
      $(this).prev().removeClass("hoveredBg");
    });
});

.hoveredBg {
  background-color: red;
}

<div class="div1">div 1 hover</div>
<div class="div2">div 2 hover</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This approach will only apply the hover effect to the previous sibling div and prevent unnecessary burden on the browser for handling next sibling hovers, which can be achieved using CSS alone.

Answer 6

Unfortunately, CSS does not have a selector for targeting the previous sibling element. In this case, you will need to utilize JavaScript. One option is to use jQuery's prev() method.

$(function() {
  $(".div2").hover(function() {
      $(this).prev().addClass("hoveredBg");
    },
    function() {
      $(this).prev().removeClass("hoveredBg");
    });
});

.hoveredBg {
  background-color: red;
}

<div class="div1">div 1 hover</div>
<div class="div2">div 2 hover</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This approach will only apply the hover effect to the previous sibling div and prevent unnecessary burden on the browser for handling next sibling hovers, which can be achieved using CSS alone.

Answer 7

Answer №4

Give this code a try.

$(document).ready(function() {
  $(".item2").mouseover(function() {
    $(".item1").css("background-color", "red");
  });
  $(".item2").mouseout(function() {
    $(".item1").css("background-color", "");
  });
});

/* Custom CSS */

.item1:hover+.item2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="item1">hover</div>
<div class="item2">hover</div>

I hope this information proves helpful to you.

Answer 8

Give this code a try.

$(document).ready(function() {
  $(".item2").mouseover(function() {
    $(".item1").css("background-color", "red");
  });
  $(".item2").mouseout(function() {
    $(".item1").css("background-color", "");
  });
});

/* Custom CSS */

.item1:hover+.item2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="item1">hover</div>
<div class="item2">hover</div>

I hope this information proves helpful to you.

Answer 9

Answer №5

Take a look at this code snippet:

https://jsfiddle.net/rkqhvzyc/

$(document).ready(function() {
  $(".div2").hover(function(){
      $('.div1').css("background-color", "red");
      }, function(){
      $('.div1').css("background-color", "white");
  });
});

/* Works */
.div1:hover + .div2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>

Answer 10

Take a look at this code snippet:

https://jsfiddle.net/rkqhvzyc/

$(document).ready(function() {
  $(".div2").hover(function(){
      $('.div1').css("background-color", "red");
      }, function(){
      $('.div1').css("background-color", "white");
  });
});

/* Works */
.div1:hover + .div2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>

Answer 11

Answer №6

It's interesting how nobody has mentioned that classes can be multiple on a single page. Just targeting .div1 as suggested by many may not work as expected, affecting all other .div1 elements in the DOM.

// This is nonsense
$( ".div2" ).hover(
  function() {
    $(".div1").css( "background-color", "red" );
  }, function() {
    $(".div1").css( "background-color", "initial" );
  }
);

<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

To address the above-mentioned problem, here are a few solutions:

// Solution 1: Target using .prev() (Not flexible)
$(".hoverTargetPrev").hover(function() {
  $(this).prev(".div1").toggleClass("red");
});

// Solution 2: Better approach using .couple parent, .closest(), and .find()
$(".div2").hover(function() {
  $(this).closest(".couple").find(".div1").toggleClass("red");
});

// Solution 3: Target using .prevAll() and .eq(0) (slightly expensive but effective)
$(".hoverTargetNearestPrev").hover(function() {
  $(this).prevAll(".div1").eq(0).toggleClass("red");
});

.div2 {color:red;}
.red {background: red;}

<h3>Solution 1: Using .prev() (Not Flexible)</h3>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2 hoverTargetPrev">DIV2 hover me (will no longer work)</div>


<h3>Solution 2: Using .couple parent, .closest(), and .find() </h3>
<div class="couple">
  <div class="div1">DIV1</div>
  <div class="div2">DIV2 hover me</div>
</div>
<div class="couple">
  <div class="div1">DIV1</div>
  <div class="div2">DIV2 hover me</div>
</div>
<div class="couple">
  <div class="div1">DIV1</div>
  <div>Future intruder...</div>
  <div class="div2">DIV2 hover me (it will work!)</div>
</div>

<h3>Solution 3: Using .prevAll() and .eq(0) (a bit expensive but effective)</h3>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me (it will work!!)</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 12

It's interesting how nobody has mentioned that classes can be multiple on a single page. Just targeting .div1 as suggested by many may not work as expected, affecting all other .div1 elements in the DOM.

// This is nonsense
$( ".div2" ).hover(
  function() {
    $(".div1").css( "background-color", "red" );
  }, function() {
    $(".div1").css( "background-color", "initial" );
  }
);

<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

To address the above-mentioned problem, here are a few solutions:

// Solution 1: Target using .prev() (Not flexible)
$(".hoverTargetPrev").hover(function() {
  $(this).prev(".div1").toggleClass("red");
});

// Solution 2: Better approach using .couple parent, .closest(), and .find()
$(".div2").hover(function() {
  $(this).closest(".couple").find(".div1").toggleClass("red");
});

// Solution 3: Target using .prevAll() and .eq(0) (slightly expensive but effective)
$(".hoverTargetNearestPrev").hover(function() {
  $(this).prevAll(".div1").eq(0).toggleClass("red");
});

.div2 {color:red;}
.red {background: red;}

<h3>Solution 1: Using .prev() (Not Flexible)</h3>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2 hoverTargetPrev">DIV2 hover me (will no longer work)</div>


<h3>Solution 2: Using .couple parent, .closest(), and .find() </h3>
<div class="couple">
  <div class="div1">DIV1</div>
  <div class="div2">DIV2 hover me</div>
</div>
<div class="couple">
  <div class="div1">DIV1</div>
  <div class="div2">DIV2 hover me</div>
</div>
<div class="couple">
  <div class="div1">DIV1</div>
  <div>Future intruder...</div>
  <div class="div2">DIV2 hover me (it will work!)</div>
</div>

<h3>Solution 3: Using .prevAll() and .eq(0) (a bit expensive but effective)</h3>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me (it will work!!)</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Swap the content of div1 with div2 when div2 is hovered over while positioned underneath div1

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Exploring the process of logging in and managing PHP sessions in a jQuery mobile application

What is the best way to combine ExpressJS, VueJS, and Jade for a seamless development

How can I toggle a textbox's enabled and disabled state in Angular using a checkbox?

Extract data from the HTML source code in JavaScript and transfer it to a personalized JavaScript variable within Google Tag Manager

Try utilizing an image to hold text content rather than a traditional div container

Scrolling horizontally in a container using the mouse wheel

Tips for streamlining the filter function using replace and split:

How can I enable the "Open in a new tab" functionality while utilizing ng-click?

What steps can I take to successfully implement Tailwind CSS's max-w class?

What is the method for executing a nested query in the Parse API?

I am facing difficulties with deploying my Next.js App on Vercel. Whenever I try to deploy, I encounter an error stating that the Command "npm run build" exited with 1

What could be causing my Wordpress page to be cropped at the bottom in Internet Explorer, yet not in Firefox?

The Angular ui-calendar introduces an innovative approach to event addition, providing users with

Obtaining content from a URL based on the client's IP address rather than the server's address

How to display specific JSON objects that meet particular criteria in HTML cards using Ionic and Angular?

Notify the parent component about the connectivity status of the children

Modifying the appearance of PHP code by applying CSS styles to the font

The .val() function in jQuery can sometimes give different results when used on input elements with placeholder text in Firefox compared to Chrome

steps for making a specific cell editable in tabulatorI'm happy to help

incorporating event handlers to references retrieved from bespoke hooks