Function in jQuery to reference two different divs

Question

Function in jQuery to reference two different divs

I'm currently facing an issue with a code snippet that I have. The requirement is for the user to be able to hover over "Div 1" and/or "Div2" and trigger a red border around both elements simultaneously. Due to the complexity of my WordPress theme, these elements cannot be nested, making it challenging to achieve this effect using simple CSS methods.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>    

<body>
    <div class="attachment-shop_catalog">Div 1</div>
    <div class="title-wrapper">Div 2</div>
</body;

<script>

$(document).ready(function() {
   $('.attachment-shop_catalog .title-wrapper').hover(function() {
   $(this).css('border', '1px solid red');
   },function() {
   $(this).css('border', '0');
   });
});

</script>

</html>

CSS (external stylesheet):

.attachment-shop_catalog {
    background-color: grey;
    border: 1px solid #000;
    border-bottom: none;
    padding: 10px 20px 10px 20px;
    width: 80px;
 }

.title-wrapper {
    border: 1px solid #000;
    padding: 40px 20px 40px 20px;
    width: 80px;
}

Attached are images from the live site showcasing where the red border needs to appear identically on both elements simultaneously.

I would greatly appreciate any guidance or assistance in resolving this issue with the code. Thank you in advance! :)

javascript jquery html css

Answer 1

Answer №1

$(document).ready(function() {
   $('.attachment-shop_catalog, .title-wrapper').hover(function() {
   $('.attachment-shop_catalog, .title-wrapper').css('border', '1px solid red');
   },function() {
   $('.attachment-shop_catalog, .title-wrapper').css('border', '0');
   });
});

Give this a go. This code will add or remove border to both selected divs.

Answer 2

$(document).ready(function() {
   $('.attachment-shop_catalog, .title-wrapper').hover(function() {
   $('.attachment-shop_catalog, .title-wrapper').css('border', '1px solid red');
   },function() {
   $('.attachment-shop_catalog, .title-wrapper').css('border', '0');
   });
});

Give this a go. This code will add or remove border to both selected divs.

Answer 3

Answer №2

To bind the handler effectively, remember to use a comma to select multiple elements. Additionally, when using a space in a selector, it signifies that the second class must be nested within the first.

If you desire to enclose both DIVs in a single box rather than individually, make sure to wrap them in another parent DIV.

$(document).ready(function() {
  $('.attachment-shop_catalog, .title-wrapper').hover(function() {
    $(this).closest(".container").css('border', '1px solid red');
  }, function() {
    $(this).closest(".container").css('border', '0');
  });
});

.attachment-shop_catalog {
    background-color: grey;
    border: 1px solid #000;
    border-bottom: none;
    padding: 10px 20px 10px 20px;
    width: 80px;
 }

.title-wrapper {
    border: 1px solid #000;
    padding: 40px 20px 40px 20px;
    width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="attachment-shop_catalog">Div 1</div>
  <div class="title-wrapper">Div 2</div>
</div>

Answer 4

To bind the handler effectively, remember to use a comma to select multiple elements. Additionally, when using a space in a selector, it signifies that the second class must be nested within the first.

If you desire to enclose both DIVs in a single box rather than individually, make sure to wrap them in another parent DIV.

$(document).ready(function() {
  $('.attachment-shop_catalog, .title-wrapper').hover(function() {
    $(this).closest(".container").css('border', '1px solid red');
  }, function() {
    $(this).closest(".container").css('border', '0');
  });
});

.attachment-shop_catalog {
    background-color: grey;
    border: 1px solid #000;
    border-bottom: none;
    padding: 10px 20px 10px 20px;
    width: 80px;
 }

.title-wrapper {
    border: 1px solid #000;
    padding: 40px 20px 40px 20px;
    width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="attachment-shop_catalog">Div 1</div>
  <div class="title-wrapper">Div 2</div>
</div>

Answer 5

Answer №3

It is assumed that the DOM structure ensures $('.attachment-shop_catalog') and $('.title_wrapper') are congruent, forming pairs despite their physical layout.

If this assumption remains consistent, it should persist even through WordPress DOM changes, allowing for the following javascript implementation:

$(document).ready(function() {
    var pair = '_hover_binding_'; // a unique random string

    $('.attachment-shop_catalog').forEach(function() {
        var $pair = $('.title-wrapper').eq($('.attachment-shop_catalog').index(this)).add(this);
        $pair.data(pair, $pair);
    })
    .add('.title-wrapper').hover(function() {
        $(this).data(pair).css('border', '1px solid red');
    }, function() {
        $(this).data(pair).css('border', '0');
    });
});

This procedure may seem complex but with comprehensive jQuery knowledge, it can be easily understood as per the comments provided.

The initial assumption can be adapted if necessary. Any reliable pairing rule at step 1 will yield a functional solution.

Answer 6

It is assumed that the DOM structure ensures $('.attachment-shop_catalog') and $('.title_wrapper') are congruent, forming pairs despite their physical layout.

If this assumption remains consistent, it should persist even through WordPress DOM changes, allowing for the following javascript implementation:

$(document).ready(function() {
    var pair = '_hover_binding_'; // a unique random string

    $('.attachment-shop_catalog').forEach(function() {
        var $pair = $('.title-wrapper').eq($('.attachment-shop_catalog').index(this)).add(this);
        $pair.data(pair, $pair);
    })
    .add('.title-wrapper').hover(function() {
        $(this).data(pair).css('border', '1px solid red');
    }, function() {
        $(this).data(pair).css('border', '0');
    });
});

This procedure may seem complex but with comprehensive jQuery knowledge, it can be easily understood as per the comments provided.

The initial assumption can be adapted if necessary. Any reliable pairing rule at step 1 will yield a functional solution.

Function in jQuery to reference two different divs

Answer №1

Answer №2

Answer №3

Similar questions

Webpack is failing to recognize certain CSS files

The JSP page does not redirect after an Ajax post request has been made

What is the definition of a type that has the potential to encompass any subtree within an object through recursive processes?

Tips for using the deferred method in ajax to enhance the efficiency of data loading from a php script

Every time Tailwind compiles, it seems to generate a glitchy class

Scrolling seamlessly within a container that is fixed in position

The process of uploading data onto a map using jquery is quite inconsistent in its functionality

Exploring the properties of individual Vue components on a single page with v-for loop

Refresh the page to verify if the user has successfully established a connection with PhoneGap through AngularJS

Collapsing or expanding the Material UI accordion may lead to flickering on the page

Is there a way to make images appear on the screen only when they come into view on

Centralizing images in a Facebook gallery/lightbox during the loading process

Canvas not displaying image in JavaScript

Error: Unable to locate Buffer2

The issue arises when trying to use jQuery on multiple elements with the same class

Transforming a JSON into a JavaScript object using deserialization

submitting a collection of hashes to a server using jQuery

Angular: Display an element above and in relation to a button

Instructions on incorporating domains into next.config.js for the "next/image" function with the help of a plugin

Previewing multiple images with multiple file inputs