CODEWITHSUNDEEP
csshtmlhideblock
user1547410
user1547410

Reputation: 893

Display none/block on div is not working

i'm trying to get this working but i cant figure out why it wont, is there a way of troubleshooting this i.e to see errors

What i am trying to achieve is to show the info in the showhim div when i hover over the stat1 div but it aint happening.

I put it here:

http://jsfiddle.net/ksvrY/39/

<div id="post-wrap">
   <div class="showhim" id="stat1_text">
        This is some example test<br />
        This is another line<br />
        And another one<br />
        And a final one
  </div>


    <div id="stat1" class="stat1">
        <a href="#">Hover over this div</a>
    </div>
</div>

.showhim
{
    display: none;
    margin-bottom: 30px;
}

.stat1:hover .showhim
{
    display: block;
}

Upvotes: 1

Views: 8417

Answers (4)

Justin Bicknell
Justin Bicknell

Reputation: 4798

Edit: As pointed out by Paul, you can use the sibling selector. So there is actually a way to do this with pure css in this case

.stat1 is not a parent of .showhim.

You can use javascript. So something like (using jQuery):

$('.stat1').mouseover(function(){
  $('.showhim').show();
}).mouseout(function(){
  $('.showhim').hide();
});

See http://jsfiddle.net/ksvrY/50/

Upvotes: 2

Rain Diao
Rain Diao

Reputation: 926

agree with paul

and here's another solution:

move .showhim into #stat1:

<div id="post-wrap">
    <div id="stat1" class="stat1">
        <a href="#">Hover over this div</a>
        <div class="showhim" id="stat1_text">
            This is some example test<br />
            This is another line<br />
            And another one<br />
            And a final one
        </div>
    </div>
</div>

Upvotes: 0

benhowdle89
benhowdle89

Reputation: 37464

For it to work, the .showhim needs to be a child element of .stat1.

Upvotes: 2

Paul
Paul

Reputation: 90

You could do a sibling select.

<div id="post-wrap">
<div id="stat1" class="stat1">
    <a href="#">Hover over this div</a>
</div>

 <div class="showhim" id="stat1_text">
    This is some example test<br />
    This is another line<br />
    And another one<br />
    And a final one
</div>

.showhim
{
  display: none;
  margin-bottom: 30px;
}

.stat1:hover ~ .showhim
{
  display: block;
}

Upvotes: 2

Related Questions