Question

I have a slightly tricky one here I hope the community can help me with… I’ll try and explain what I want as clearly and simply as possible…

I have a menu of links in divs
I am using dropcontent.js to show a div (and load project content into it) when the link in a div is clicked. I have this working fine.

Now I want to add a hover effect to the link (and its containing div) so that another div shows when the link is hovered on. This div will contain intro text to the project. This div should stay visible when either the link in the div is hovered on, or this intro div itself is hovered on. Clicking anywhere on this intro div should also show the main div and load the project conent into it. Once the main project div has loaded, the intro div should remain visible until the main project div is hidden (by clicking on another project)

So, my html looks like this

<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 -->

Logic…

• When the project 1 h3 link (and its containing div) is hovered on, the .projectIntro div for project 1 shows

• When the .projectIntro div for project 1 is hovered on, it should remain showing

• If another link in the list is hovered, it’s intro div will show and the previous intro div will hide

• If project 1 h3 link, or its intro div is clicked the div containing the main project content (.pictures) should show and load the content

• If main project div is visible, it’s intro div is also always visible

• A main project div is hidden by clicking for a second time on it’s link, or clicking on the link for another project (already working)

I hope that’s clear! If not please let me know…

So the problem I am having is as follows:

The main issue I am having is with the hovers this is the code I currently have:

$(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;
        }
    });
});

I sourced this code from a related search I did on here…

The first main issue I have is that this code was for a single link, not a list of links – so when I hover over a link, the projectIntro for all links is showing. I am sure I should be using children so that only the relevant project intro shows but I am a bit confused as to how to change the code so it works like that.

Second, it seems to be triggering the animations multiple times on hover so I need a .stop somewhere – just not sure where!

Third, the projectIntro should always show when the main project pictures div is loaded but not quite sure how to do that either

I think that’s it – sorry this is fairly long winded but trying to be as clear as possible

you can see where I am with this here:

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

thanks in advance for any help!

UPDATE:

Thanks to KoolKabin this is now very nearly sorted

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

… my only issue now is how to keep .projectIntro visible if .pictures is visible (regardless of any hover)

KoolKabin said “Put pictures inside .projectIntro and style project titles with another class inside..”

I have tried putting the .pictures div inside the .projectIntro div but this stops .pictures showing when it’s link is clicked

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

and I’m not sure what he meant by “style project titles with another class inside”

As it’s now past 11pm in Nepal I think KoolKabin may be taking a well deserved rest so if anyone else could help me out with this last bit it would be appreciated. Many thanks.

Answer 1

try out referring to direct child only by using .children ….

$(".work").hover(

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

A Complete workout for your code:

$(".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;
    }
});

And working example on:
http://www.outsourcingnepal.com/sample-code/jqueryCheck.htm