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.

https://i.sstatic.net/fWAGL.png https://i.sstatic.net/luSAB.png

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

What is a sleek method for including a key and value pair to an object using an array?

Filtering MUI Data Grid by array elements

Issue encountered with Ionic and ssh2: process.binding is not supported

Dealing with an overflow of Redis clients in NextJS: Simplifying the process with just one client

Link to Reply Comment Feature in Wordpress

I am curious as to why the "default + label" pseudo-class is not functioning properly on the "input" element. Specifically, I am having trouble with the "+ label" portion

When trying to access the key value of a dynamically generated object, it returns as undefined

End of ImageButton tag

v-for triggers actions on every div

Having trouble accessing Kotlin JS from JavaScript

Is it possible to trigger an event just once?

Using the 'useMediaQuery' function from Material UI in a class component

What are the steps to implement email validation, Saudi mobile number validation, and national ID validation in cshtml?

What is the best way to set a default function in a mongoose schema?

The dynamic duo: Selenium and HTML!

Switching between components in vue.js: A beginner's guide

Having trouble retrieving the $scope value in HTML, even though it was assigned within the success function of $http.post

The REST API endpoint links for Timestamp are displaying a 404 error message indicating they cannot be

"Uncaught ReferenceError: $ is not defined in a JavaScript/Vue.js

I require assistance in configuring the timing for an animation using Jquery