问当链接悬停时显示divs包括拖放内容

EN

我这里有一个有点棘手的问题，我希望社区能帮助我…我会尽可能清楚和简单地解释我想要什么……

我在div中有一个链接菜单，当单击div中的链接时，我使用dropcontent.js来显示div(并将项目内容加载到其中)。我让它工作得很好。

现在我想给链接添加一个悬停效果(以及它包含的div)，这样当链接悬停在上面时，另一个div就会显示出来。此div将包含项目的介绍性文本。当div中的链接悬停在上面，或者这个介绍div本身悬停在上面时，这个div应该保持可见。单击此介绍div上的任意位置也应显示主div，并将项目内容加载到其中。一旦加载了主项目div，介绍div应该保持可见，直到隐藏主项目div (通过单击另一个项目)

因此，我的html如下所示

<div class="menu_body">

<div class="work">
  <h3><a href="project1.html">Project 1</a></h3>
  <div class="projectIntro">
    <p>This is some intro text for project 1</p>
  </div>
  <div class="pictures"></div>
</div>

<div class="work">
  <h3><a href="project2.html">Project 2</a></h3>
  <div class="projectIntro">
    <p>This is some other intro text for project 2</p>
  </div>
  <div class=“pictures”></div>
</div>

</div><!--end menu_body -->

逻辑..。

·当项目1div链接(及其包含的h3 )悬停在其上时，项目1的.projectIntro div显示

·当项目1的.projectIntro div悬停时，它应该保持显示状态

·如果列表中的另一个链接悬停，它的介绍div将显示，而前一个介绍div将隐藏

·如果单击项目1的h3链接或其介绍目录，则应显示并加载包含主要项目内容(.pictures)的目录

·如果主项目div可见，则它的介绍div也始终可见

·通过再次单击主项目div的链接，或单击另一个项目(已在运行)的链接，可以隐藏主项目div

我希望这是清楚的！如果没有，请让我知道…

因此，我遇到的问题如下：

我遇到的主要问题是悬停，这是我目前拥有的代码：

$(document).ready(function() {
    //when user hovers over .work the projectIntro is shown
    $(".projectIntro").hide();
    $(".work").hover(

    function() {
        $(".projectIntro").show("fast");
    }, function() {
        $(".projectIntro").mouseout.hide("slow");
    });


    $('.projectIntro').bind('mouseenter mouseleave', function(event) {
        switch (event.type) {
        case 'mouseenter':
            // when user enters the div
            $(".projectIntro").show("fast");
            break;
        case 'mouseleave':
            // leaves
            $(".projectIntro").hide("slow");
            break;
        }
    });
});

我从我在这里做的相关搜索中获得了这段代码...

我遇到的第一个主要问题是，这段代码是针对单个链接的，而不是一个链接列表-所以当我将鼠标悬停在一个链接上时，所有链接的projectIntro都会显示出来。我确信我应该使用子项目，以便只显示相关的项目简介，但我对如何更改代码以使其像这样工作有点困惑。

其次，它似乎在悬停时多次触发动画，所以我需要在某个地方使用.stop -只是不确定在哪里！

第三，projectIntro应该始终显示主项目图片div加载的时间，但也不太确定如何执行此操作

我想这就是了-抱歉，这是相当冗长的，但我尽量说得清楚

你可以在这里看到我所处的位置：

http://www.spiritlevel.co.uk/hovertest/hovertest.html

提前感谢您的帮助！

更新：

多亏了KoolKabin，现在已经非常接近分类了。

http://www.spiritlevel.co.uk/hovertest/hovertest4.html

..。我现在唯一的问题是，如果.pictures可见，如何保持.projectIntro可见(无论悬停)。

KoolKabin说“将图片放入.projectIntro中，并在其中使用另一个类设置项目标题的样式。”

我曾尝试将.pictures目录放入.projectIntro目录中，但这会在单击.pictures的链接时停止显示它

http://www.spiritlevel.co.uk/hovertest/hovertest5.html

我不确定他所说的“在项目标题中加入另一个类”是什么意思。

现在尼泊尔已经过了晚上11点了，我想KoolKabin可能是在休息，所以如果有人能帮我解决最后一点问题，我将不胜感激。非常感谢。