I have a few sets of divs that contain three divs set up in the following way:

<div class="outer-div">
<div class="inner1"></div>
<div class="inner2" style="display:none;"></div>
</div>

<div class="outer-div">
<div class="inner1"></div>
<div class="inner2" style="display:none;"></div>
</div>

<div class="outer-div">
<div class="inner1"></div>
<div class="inner2" style="display:none;"></div>
</div>

I have the second inner div of each hidden via the inline style. What I am trying to accomplish is that when the outer div of any, or basically any of the content is hovered over then the inner2 would appear but only one at a time within the outer-div.

I am unfamilar with Prototype and having a terrible time trying to get my head around it.

Thanks in advance for any help!!

5 answers

1
point
This was chosen as the best answer

What you're trying to do can actually be accomplished with CSS. It will need testing in older browsers (IE6 especially) but you might not be targeting for those.

Here's a simple solution in CSS, I'm a jQuery user so I will need to lookup the syntax before I can do it in Prototype. (let me know if the CSS version doesn't work for you).

The HTML

<div class="outer-div">
    <div class="inner1">inner 1</div>
    <div class="inner2">Some text for the inner2</div>
</div>

<div class="outer-div">
    <div class="inner1">inner 1</div>
    <div class="inner2">Some text for the inner 2</div>
</div>

<div class="outer-div">
    <div class="inner1">inner 1</div>
    <div class="inner2">Some text for the inner 2</div>
</div>

The CSS

  START: Demo styles


.outer-div {
width: 400px;
float: left;
padding: 10px;
border: 1px solid #ccc;
}

.outer-div .inner1 {
    font-weight: bold;
}

END: Demo styles 

    .outer-div .inner2 {
        display: none;
    }
    .outer-div:hover .inner2 { /*this is where the magic happens */
        display: block;
    }

I'm sorry the CSS code looks messy, I'm having a bit of trouble with this editor :) I've put in some styling for demo purposes so you can see it in action. Let me know if you need this in prototype, it should be fairly basic!

Answered over 9 years ago by Marko Ivanovski
  • I basically do the same thing here except that I use a hack to keep IE from trying and failing to get it right. Then, I ad some Javascript to get the same effect for IE users. kainosnous over 9 years ago
1
point

Here we go

CSS

.outer-div .inner2 {
    display: none;
}

Javascript

    Event.observe(window, 'load', function() {
    $$(".outer-div").invoke('observe', 'mouseover', function(event) {
        this.setStyle({cursor: 'pointer'});
        this.down('.inner2').setStyle({display: 'block', cursor: 'pointer'});
    });
    $$(".outer-div").invoke('observe', 'mouseout', function(event) {
        this.down('.inner2').setStyle({display: 'none'});
    });
});

Enjoy :)

Answered over 9 years ago by Marko Ivanovski
  • And just remove the style="display: none" from the elements. It's just extra mark-up. Marko Ivanovski over 9 years ago
  • I've also added in cursor: pointer so a hand shows up when hovering over the element (for usability). Remove if not desired. Marko Ivanovski over 9 years ago
0
points

Tks men, you rules. All the day im looking, trying and fighting with prototype, you give the solution. :) :)

Answered about 9 years ago by Mauro
0
points

You could also use Jquery to make it visual a bit more attractive

$(document).ready(function(){
  $(".outer-div").hover(function(){
   $(this).find(".inner2").fadeIn('slow');
  }, function(){
   $(this).find(".inner2").fadeOut('slow');
  });    
});

This binds a hover event to outer-div, then when the event is trigerd, it looks for a child with class inner2. This will fadein, the part after the comma makes sure that it fades out again on mouseout. Ofcourse you can use any other effect of jquery http://api.jquery.com/category/effects/

Answered over 9 years ago by Menno Geelen
0
points

Hi Guys,

Thanks so much for your answers. While both solutions would probably work just fine, I am stuck with using prototype as a requirement. If anyone has any additional answers, I would greatly appreciate it.

Thanks again!

Answered over 9 years ago by Phillip Lovelace