Design of multiple divs with asymmetrical hover effects

Consider the following scenario:

  • The gallery-menu consists of 2 title-images and 7 sub-images.
  • 3 sub-images are connected to title-image 1, while 4 sub-images are linked to title-image 2.
  • The sub-images are not in order corresponding to their titles.
  • All images are enclosed in an "a" tag; each title-image and its sub-images link to the same page.

I am trying to establish multiple hover effects in an asymmetrical manner: - When hovering over a title-image, that image along with all its related sub-images should change to their hover state. - If a sub-image is hovered over, it and its associated title image should switch to their hover states (without affecting the rest of the set).

I hope this explanation makes sense :-)

Despite my efforts to achieve this using CSS, I believe it may not be possible. JQuery appears to offer a solution, but my proficiency in it is limited.

Could someone guide me in the right direction?

.galleryitem:hover img.off { display: none; }
.galleryitem       img.on  { display: none; }
.galleryitem:hover img.on  { display: inline-block; }

.float {
  float: left;
  }
<!-- TITLE A -->
<div id="A"  class="galleryitem float">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/654abe" alt=""/>
</div>

<!-- TITLE B -->
<div id="B"  class="galleryitem">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/26a2cc" alt=""/>
</div>

<!-- JUMBLED SUB-IMAGES -->

<div id="wrapper">
<div id="A1"  class="galleryitem float">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/654abe" alt=""/>
</div>

<div id="B1"  class="galleryitem float">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/26a2cc" alt=""/>
</div>
  
<div id="A2"  class="galleryitem float">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/654abe" alt=""/>
</div>

<div id="B2"  class="galleryitem float">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/26a2cc" alt=""/>
</div>
  
<div id="A3"  class="galleryitem float">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/654abe" alt=""/>
</div>
  
<div id="A4"  class="galleryitem float">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/654abe" alt=""/>
</div>
  
<div id="B3"  class="galleryitem float">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/26a2cc" alt=""/>
</div>
  
  </div>

javascriptjqueryhtmlcss

Answer №1

Here is the solution you are looking for:

$(function() {
  $('body').on('mouseover mouseleave', '.galleryitem', function (e) {
    var this_id = $(this).attr('id');
    var selectors;
    if (this_id.length == 1) {
      // parent
      selectors = '#' + this_id + ',[id*="' + this_id + '"]';
    } else {
      // child
      var parent_id = '#' + this.id.substr(0, 1);
      selectors = '#' + this_id + "," + parent_id;
    }
    if (e.type == 'mouseover') {
      $(selectors).removeClass('off-state').addClass('on-state');
    } else {
      $(selectors).removeClass('on-state').addClass('off-state');
    }
  });
});
.galleryitem.on-state img.off { display: none; }
.galleryitem.on-state img.on  { display: inline-block; }

.galleryitem.off-state       img.on   { display: none; }

.float {
  float: left;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- TITLE A -->
<div id="A"  class="galleryitem float off-state">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/654abe" alt=""/>
</div>

<!-- TITLE B -->
<div id="B"  class="galleryitem off-state">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/26a2cc" alt=""/>
</div>

<!-- JUMBLED SUB-IMAGES -->

<div id="wrapper">
<div id="A1"  class="galleryitem float off-state">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/654abe" alt=""/>
</div>

<div id="B1"  class="galleryitem float off-state">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/26a2cc" alt=""/>
</div>
  
<div id="A2"  class="galleryitem float off-state">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/654abe" alt=""/>
</div>

<div id="B2"  class="galleryitem float off-state">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/26a2cc" alt=""/>
</div>
  
<div id="A3"  class="galleryitem float off-state">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/654abe" alt=""/>
</div>
  
<div id="A4"  class="galleryitem float off-state">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/654abe" alt=""/>
</div>
  
<div id="B3"  class="galleryitem float off-state">
    <img class="off" src="http://placehold.it/100x50" alt=""/>
    <img class="on" src="http://placehold.it/100x50/26a2cc" alt=""/>
</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

Supertest request not being processed by Express POST API Route

Trying out a test on an Express API POST Route that employs Express Validator for check: usersRouter.post( '/', [ check('name', 'Need to input a name.').not().isEmpty(), check('email', 'Must add a va ...

javascriptnode.jsexpressjestjssupertest

What could be causing the new paragraphs I create with jQuery to be unresponsive when clicked on?

In my HTML code, I have some paragraphs set up as examples. When I click on them, the jQuery click function works correctly and the specified action is executed. However, I also have a button that adds new paragraphs to the body, but the new ones do not re ...

javascriptjqueryhtml

Are JQuery functions affected when navigating between pages in smart-tables?

Apologies if this question has been answered before or seems obvious. I couldn't find a solution after searching, and as someone new to web development, I might be going in circles here. Issue: I've integrated the smart-table extension () into ...

javascriptjqueryhtmlangularjssmart-table

Guide to emphasizing a specific term within a string by utilizing coordinates in javascript

I am facing a challenge when trying to highlight multiple words within a sentence. Specifically, I have text data that looks like this: "The furnishing of Ci Suo 's home astonished the visitors: a home of 5 earthen and wooden structures, it has a sit ...

javascripthtmlcssvue.js

Trigger the function when the keyboard event is deactivated

Is there a way to continuously run the top set interval whenever I lift my finger from the space key? When I try using the key up event, it only executes that function once. I'm not sure how to implement if/else logic when adding an event listener. se ...

javascripteventskeyboardsetinterval

Problem with IE8 compatibility in CSS

I'm currently working on a new website, but I'm encountering an issue with its display in IE8. The social bar is not aligning correctly and is floating down instead of staying to the right like it does in other browsers. This misalignment is caus ...

cssinternet-explorerheader

Strategies for managing extensive data collections during server-side simulation to enhance performance on client browsers

Apologies for the unclear title. I am facing a bit of confusion with my current project. I am in the process of developing a web front-end for an academic simulation tool, which includes a C++-based simulator that is efficient for small systems but produce ...

javascriptphpajaxweb-applicationsdataset

Troubles with Conditional Application of CSS Styles to a Twitter-Bootstrap Table

I am facing an issue with highlighting a row in a table when a barcode is entered. Despite following similar scenarios and checking my code, the CSS doesn't seem to be applied. Can anyone help me figure out what I'm missing or how I can fix this? ...

csshtmltwitter-bootstrapangular

Can you explain the meaning of the ?. operator in JavaScript?

While using react-hook-form, I encountered the ?. operator. Can you explain its meaning? Here's an example of how it works: <span>{errors?.name?.message}</span> The errors variable is obtained from useForm() by destructuring, as shown bel ...

javascriptreactjsreact-hook-form

Can each `InstancedBufferGeometry` instance have its own set of unique vertex colors?

Is it possible to assign different vertex colors to each instance of InstancedBufferGeometry? const xRes = 3; const yRes = 2; const numVertices = xRes * yRes; geometry = new THREE.InstancedBufferGeometry(); geometry.copy(new THREE.PlaneBufferGeometry(3, 2 ...

javascriptthree.js

Switch between viewing outcomes retrieved from a database

I'm fairly new to working with jQuery, PHP and databases, but I have managed to successfully create a database and retrieve data using PHP. When a search term is entered, the retrieved data from the database is displayed on the results page. For exam ...

javascriptjquery

Mobile devices experiencing issues with mouse events

My 360 panorama image works perfectly on desktop, but I'm having trouble getting the mouse events to work on mobile phones. How can I resolve this issue? // listeners document.addEventListener("mousedown", onDocumentMouseDown, false); document.addEv ...

javascripteventsmobilethree.jstouch

Navigating through various JSON arrays using Angular

I am currently working with a large JSON file in Angular and trying to iterate through it. The structure of the JSON file is as follows: { "subject1":[ { "title":"titlehere", "info":"infohere." }], ...

javascriptjsonangularjs

Arrangement of elements in Bootstrap

Is there a way to prevent my frame from overflowing compared to its parent class when using bootstrap's row class? How can I address this issue? https://i.sstatic.net/gR7Ep.png Here is my code: html: <div class="container"> <div cla ...

htmlcssbootstrap-4

Exploring data with interactive visualizations and tables

I have a lingering question that has been on my mind for quite some time. I am curious to know if it is feasible to stream data from a datatables query directly to a chart. Let me elaborate further. Imagine having a datatable displaying "fruits" on the lef ...

javascriptphpmysqlchartsdatatable

"Discover the process of sending a JSON value from a PHP page to an HTML page using AJAX, and learn how to display the resulting data

I am currently validating an email ID using PHP and AJAX, with the intention of returning a value from the PHP page to the HTML in JSON format. My goal is to store this return value in a PHP variable for future use. All of this is being executed within C ...

javascriptphpajaxjsoncodeigniter

Switching from JavaScript to TypeScript resulted in React context not being located in its respective file

I previously had my context and context provider set up in a file, and everything was working perfectly. However, I recently decided to convert all of my files to TypeScript, including this one. Unfortunately, I've encountered a strange issue that I c ...

javascriptreactjstypescript

"Upon submission of the data through the HTML form, the response

Experiencing an unusual issue when using $.post to communicate with a PHP file. The PHP file itself, when accessed directly, echoes 'someresult' but when using $.post, the data returned is null. Any assistance would be greatly appreciated. $(&ap ...

phpajaxjquery

modify the class's CSS style

Hey there! I'm having an issue with my code snippet. My goal is to change the background color of both fields with the class 'navicon', as shown in the function fu(). However, it's not working as expected. Changing the color based on id ...

javascripthtmlcss

Utilizing nested ajax calls

Welcome to my first day and first question on this platform. I hope you can forgive me if my question seems trivial here. My current challenge involves calling ajax within ajax. The first ajax call triggers a controller action that inserts a record into t ...

phpajaxjquerysymfony