2014-12-24 3 views
-1

Я сделал свой стол скрытым с display: none;, теперь я хочу, чтобы он отображался с display:block;, но он не работает.CSS-дисплей: блок не работает

Это мой код в 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; } 

Мой HTML-код:

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

Я полагаю, все, что вам нужно, чтобы изменить его с помощью 'дисплея: блок! important; ', но я не уверен, правильно ли понял ваш вопрос ... – Adrian

+2

вы хотите отображать таблицу как блок, а не как таблицу ?. –

ответ

0

Попробуйте селектор родственный:

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

это posibol добавить еще одну вещь к нему? Я попробовал это, но он не работал. #ArijsLieve: hover ~ #arijslievetable ~ #arijslievefototable {display: block; } –

-1

Вы, вероятно, необходимо использовать Javascript и нужно действие. Поэтому, щелкнув, вы захотите показать свою таблицу, я предполагаю. Вот хороший ресурс для этой идеи: JavaScript onClick addClass

Что происходит, когда вы говорите, что на дисплее ничего не скрывается, и вам нужен Javascript, чтобы заменить этот класс другим классом, который читает блок отображения.

Надеюсь, это поможет.

+0

Здесь нет необходимости использовать javascript. –

+0

Извините, вопрос запутан, сначала он просит отобразить: none, а затем он хочет отобразить: блок. почему бы просто не удалить дисплей: нет? – BHCOM

+0

Он хочет, чтобы '# arijslievetable' отображался при зависании' # ArijsLieve'. –

3

Стол - соседний родной брат, а не его потомок.

Вам нужен соседний комбинированный комбинатор (+), а не комбинатор потомков ().

Кроме того, таблица должна быть display: table не display: block.

+0

это posibol добавить еще одну вещь к нему? Я попробовал это, но он не работал. #ArijsLieve: hover ~ #arijslievetable ~ #arijslievefototable {display: block; } –

0

попробовать этот #ArijsLieve:hover + #arijslievetable{ display: block; } Если вы хотите, чтобы иметь возможность парить над #ArijsLieve вы должны удалить top:-300px