Question

我在这里有点棘手，我希望社区可以帮助我......我会尽可能清楚简单地解释我想要的东西......

我在div中有一个链接菜单当点击div中的链接时，我正在使用dropcontent.js显示div（并将项目内容加载到其中）。我有这个工作正常。

现在我想为链接（及其包含div）添加悬停效果，以便在链接悬停时显示另一个div。该div将包含项目的介绍文本。当div中的链接悬停在上面时，此div应该保持可见，或者这个intro div本身会悬停在上面。单击此介绍div上的任何位置也应显示主div并将项目conent加载到其中。加载主项目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 -->

...逻辑

•当项目1 h3链接（及其包含div）悬停时，项目1的.projectIntro div显示

•当项目1的.projectIntro div悬停时，它应该仍然显示

•如果列表中的其他链接悬停，它的前奏div将显示，前一个介绍div将隐藏

•如果单击项目1 h3链接或其简介div，则包含主项目内容（.pictures）的div应显示并加载内容

•如果主项目div可见，它的intro 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 div放在.projectIntro div中，但这会停止.pictures显示何时点击链接

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

并且我不确定他的意思是“样式项目标题与另一个类”

现在已经过了晚上11点在尼泊尔，我认为KoolKabin可能会得到应得的休息，所以如果有人能帮我解决这个问题，我将不胜感激。非常感谢。

Answer 1

尝试使用.children ....直接引用直接孩子。

$(".work").hover(

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

完整的代码训练：

$(".work").hover(
    function() {
    $(this).children(".projectIntro").show("fast");
  }, function(){
    $(this).children(".projectIntro").hide("slow");
  });


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

以工作为例： http://www.outsourcingnepal.com/sample-code/jqueryCheck.htm

链接悬停时显示div - 包括删除内容

1 个答案: