如何<div>通过观察其他容器中的鼠标悬停来隐藏一个元素中的元素<div>

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：通过鼠标悬停在<div id="two-id">内的<img id="image-x-id" />上，<div id="one-id">内的<div id="value-2">必须消失，对于<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