javascript - 如何通过观察其他 容器中的鼠标悬停来隐藏一个 内的一个元素

Question

    <div id="one-id">
        <div id="some">Info</div>
        <div id="control">
            <div id="value-1">
                <img id="image-one-id" />
                <img id="image-two-id" />
                <img id="image-three-id" />
            </div>
            <!-- this block appears after mouseover on <img id="image-x-id" />, for each image-x-id will be loaded its own values -->
            <div id="value-2">
                <div id="value-one-id"></div>
                <div id="value-two-id"></div>
                <div id="value-three-id"></div>
            </div>
        </div>
    </div>
    <div id="two-id">
        same logic as above
    </div>
    etc...

第 1 步:<div id="value-2">将通过观察 <img id="image-x-id" /> 上的鼠标悬停事件来显示并且所有值都保持可见。 <img id="image-x-id" />将得到class="selected" .

第 2 步:通过鼠标悬停 <img id="image-x-id" />里面<div id="two-id"> <div id="value-2">里面<div id="one-id">必须消失，并且将对 <div id="two-id"> 重复步骤 1 .

我需要一点帮助，因为我迷失在我的嵌套 div 中。

Answer 1

在 JS 中:

 $('.value1').find("img").hover(function(){    
     var el = '.' + $(this).attr('data-target');
    $('.control').find(el).hide();
    $(this).closest('.control').find(el).show();
 });

在 CSS 中:

 .value1{
    background: yellow;
  }
  .value2{
    display: none;
    background: #ccc;
  }

JSFIDDLE