Assymmetrical hover structure of multiple divs

Question

Following situation:

• Gallery-menu has 2 title-images and 7 sub-images.
• 3 sub-images are linked to title-image 1; 4 sub-images are linked to title-image 2.
• The sub-images are jumbled (not adjacent according to title).
• all images are wrapped in an "a"-tag; a title-image and its sub-images all link to the same page.

What I am trying to do is to link multiple hover-instances in an asymmetrical way: - when you hover over a title-image, this image + all sub-images that belong to that title change to their hover image state; - when you hover over a sub-image, this image + the title image that it belongs to change to their hover state (but not the rest of the set);

I hope I'm making sense with this :-)

Frankly I've tried any way I could possibly find to code this with CSS, but I think it's just not possible. JQuery seems an obvious solution, but I'm not very experienced.

Can anyone help 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>

Answer 1

This should do it:

$(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>