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">必须消失，并且{{1}将重复步骤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

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

1 个答案: