CSS display: block doesnt work

Question

I made my table hidden with display: none; now I want to make it appear with display:block; but it doesn't work.

This is my code in css:

#ArijsLieve{
    background: #333;
    color: white;
    width: 100px;
    text-align: center;
    position: relative;
    top: -300px;
    left: 265px;
    cursor: pointer;
}        
#arijslievetable{
    background: #333;
    color: white;
    width: 200px;
    position: absolute;
    top: 701px;
    left: 273px;
    display: none;
}
#ArijsLieve:hover #arijslievetable{ display: block; }

My html code:

<div id="ArijsLieve">
<h3> Arijs Lieve </h3>
</div>

<table id="arijslievetable">
    <tr>
        <td> Kleuters 3j woensdag </td>
    </tr>
    <tr>
        <td> Kleuters 4j woensdag </td>
    </tr>
    <tr>
        <td> Kleuters 5j woensdag </td>
    </tr>
    <tr>
        <td> Team acro competitie </td>
    </tr>

I suppose all you need is to override it with display: block !important; but I am not sure if I understood your question correctly... — Adrian
– Adrian, Commented Dec 24, 2014 at 22:31
you want to display a table as a block instead of as a table?. — Jay Harris
– Jay Harris, Commented Dec 24, 2014 at 22:34

Quentin · Accepted Answer · 2014-12-24 22:33:52Z

3

The table is the adjacent sibling of the div, not its descendant.

You need an adjacent sibling combinator (+) not a descendant combinator ().

Additionally, a table should be display: table not display: block.

answered Dec 24, 2014 at 22:33

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peyman Karimi Over a year ago

is it posibol to add one more thing to it? i tryed this but it didnt work. #ArijsLieve:hover ~ #arijslievetable ~ #arijslievefototable { display: block; }

Johan Karlsson · Accepted Answer · 2014-12-24 22:34:00Z

0

Try sibling selector:

#ArijsLieve:hover ~ #arijslievetable{ display: block; }

answered Dec 24, 2014 at 22:34

Johan Karlsson

6,4761 gold badge22 silver badges28 bronze badges

1 Comment

Peyman Karimi Over a year ago

is it posibol to add one more thing to it? i tryed this but it didnt work. #ArijsLieve:hover ~ #arijslievetable ~ #arijslievefototable { display: block; }

lazy panda · Accepted Answer · 2014-12-24 22:37:29Z

0

try this #ArijsLieve:hover + #arijslievetable{ display: block; } If you want to be able to hover over #ArijsLieve you should delete top:-300px

answered Dec 24, 2014 at 22:37

lazy panda

1561 silver badge8 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:26:08Z

-1

You will probably need to use Javascript and need an action. So on click you will want to show your table I assume. Here is a good resource for this idea: JavaScript onClick addClass

What is happening is when you say display none it is hiding it and you need Javascript to replace that class with another class that reads display block.

Hope this helps.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Dec 24, 2014 at 22:30

BHCOM

1441 gold badge2 silver badges12 bronze badges

4 Comments

Johan Karlsson Over a year ago

There's no need to use javascript for this.

BHCOM Over a year ago

Sorry the question is confusing, first off he asks to display: none and then he wants to display: block. why not just remove display:none?

Johan Karlsson Over a year ago

He wants the #arijslievetable to show when #ArijsLieve is hovered.

BHCOM Over a year ago

I see missed the hover action item.

Collectives™ on Stack Overflow

CSS display: block doesnt work

4 Answers 4

1 Comment

1 Comment

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related