多个div的不对称悬停结构

Question

以下情况：

• 图库菜单有2个标题图像和7个子图像。
• 3个子图像链接到标题图像1; 4个子图像链接到标题图像2。
• 子图像混乱（根据标题不相邻）。
• 所有图片都包含在＆＃34; a＆＃34; -tag;标题图像及其子图像都链接到同一页面。

我要做的是以不对称的方式链接多个悬停实例： - 当您将鼠标悬停在标题图像上时，此图像+属于该标题的所有子图像将更改为其悬停图像状态; - 当您将鼠标悬停在子图像上时，此图像及其所属的标题图像将更改为其悬停状态（但不会更改其余部分）;

我希望我对此有所了解： - ）

坦率地说，我已经尝试过用CSS编写代码的任何方式，但我认为这是不可能的。 JQuery似乎是一个明显的解决方案，但我并不是很有经验。

任何人都可以帮助我朝正确的方向发展吗？

＆＃13;

＆＃13;

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

.float {
  float: left;
  }

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这应该这样做：

＆＃13;

＆＃13;

$(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');
    }
  });
});

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;