0

I have a DOM element that, when hovered over, should animate the opacity (to 1) of another DOM element. Because of the z order of things, I can't nest the second element, but I want the interaction such that as long as you over either DOM element, they should stay visible, but if you roll off either element, the second element should animate its opacity back to zero.

Anyone know how to do this?

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
mheavers
  • 29,530
  • 58
  • 194
  • 315
  • you want same effect, but with js ? http://jsfiddle.net/oceog/ttBqn/ – zb' Nov 01 '12 at 00:57
  • not quite - in your example, if I hovered next over the "i'm here" paragraph, both would stay visible – mheavers Nov 01 '12 at 00:58
  • can you make layout in my example ? – zb' Nov 01 '12 at 01:00
  • 1
    Then change the one CSS rule: http://jsfiddle.net/ttBqn/3/ – Ian Nov 01 '12 at 01:02
  • @lan - even better: http://jsfiddle.net/oceog/ttBqn/ – zb' Nov 01 '12 at 01:37
  • wow - had no idea you could use the + operand in css, thanks Ian – mheavers Nov 01 '12 at 01:37
  • @eicto True, but it depends on which behavior the OP wants between the two fiddles (if either). – Ian Nov 01 '12 at 01:44
  • @mheavers Don't thank me, thank eicto! I just modified one little thing from their original fiddle to give you another option of what can be done. And `+` is not exactly an "operand", it's a special selector for "adjacent" - https://developer.mozilla.org/en-US/docs/CSS/Adjacent_sibling_selectors – Ian Nov 01 '12 at 01:46
  • I mean the way with ground layer allow to show 1st time only if you hover on 1st element if you just add hover on the 2nd element it will be show if you hover on blank space – zb' Nov 01 '12 at 01:46
  • I see, so is there a way to use the adjacent selector to make multiple elements appear on the hover of a single element? – mheavers Nov 01 '12 at 01:53
  • 1
    http://jsfiddle.net/oceog/ttBqn/8/ like this ? (~ selector), but as you can see you can't control "previous" element, that makes the 1st "i'm here" to fade after you hover on next one you need a javascript to workaround this as i know – zb' Nov 01 '12 at 01:55
  • Yep, that's perfect (except I guess those showme ids should technically be classes - http://jsfiddle.net/ttBqn/9/). What is that ~ selector called? I'd like to read the documentation on it too. – mheavers Nov 01 '12 at 02:04
  • it called [General siblings selectors](https://developer.mozilla.org/en-US/docs/CSS/General_sibling_selectors) also check my last [fiddle](http://jsfiddle.net/oceog/ttBqn/10/) :) with such js helper you can workaround of disappering siblings – zb' Nov 01 '12 at 02:24
  • Cool - if you post this as an answer I will accept it. – mheavers Nov 15 '12 at 13:40

1 Answers1

-1

Using jQuery you could do something like

  var show = false;
  $(element1).hover(function()
   {
      if(!show)
      {
        show = true;
        $(element2).fadeIn();
      }
   });
  $(element2).hover(function()
   {
     if(!show)
     {
       $(this).fadeIn();
       show = true;
     }
   };
  $(element1, element2).mouseleave(function(){$(element2).fadeOut();});

The reason I used the show variable is because you don't want to fade the second element if it is already shown. You can combine multiple selectors within a single set by separating the different selectors with a comma. Hope that works for you.

Sean
  • 1,359
  • 11
  • 15
  • 1
    as i remember hover have two function parameters, for mouse enter and mouse leave – zb' Nov 01 '12 at 01:11
  • Yes, @eicto you are correct. Hover can accept two delegates for enter and leave. Here is the jQuery reference [Hover Reference](http://docs.jquery.com/Events/hover). Also, fadeIn() and fadeOut() both accept a speed or a string ie slow. [FadeIn Reference](http://docs.jquery.com/Effects/fadeIn) – Sean Nov 01 '12 at 02:28