Как сделать так, чтобы правило CSS, применяемое к div, влияло на другое div? - PullRequest
1 голос
/ 26 января 2010

Можно ли сделать следующее в CSS:

#subMenue {
//this rule apply to a div with an id of "subMenue"
height: auto;
width: 113px;
position: absolute;
background-color: #B3B3B3;
visibility: hidden;
}
#menueLink:hover {
//this rule apply to another div with an id of "menueLink"
//make the div that is effected by *#subMenue* rule change its visibility to *visible*
}

Я пытаюсь создать базовое подменю только с помощью CSS без использования JavaScript с минимальными сложностями.

Ответы [ 5 ]

6 голосов
/ 26 января 2010

Вы не можете делать как хотите с CSS. Тем не менее, вы можете использовать ниже для чистого меню CSS:

HTML:

<ul id="nav">
    <li>
        <a href="">Main Item 1</a>
        <ul>
            <li>Sub item 1</li>
            <li>Sub item 1</li>
        </ul>
    </li>
</ul>

CSS:

#nav > li ul { display: none; }
#nav > li:hover ul { display: block; }

Вы можете настроить при необходимости absolute только подменю с позицией

1 голос
/ 26 января 2010

Ответ от K Prime действительно является ответом, но вот его подход, измененный для использования абсолютного позиционирования, как вы хотели:

#nav > li ul {
    display: none;
}
#nav > li:hover ul {
    height: auto;
    width: 113px;
    position: absolute;
    background-color: #B3B3B3;
    display: block;
}
1 голос
/ 26 января 2010

Если #submenue является дочерним для подменю, вы можете создать правило:

#menueLink:hover #submenue {
    visibility:visible;
}

обратите внимание, что в IE7 и ниже, только якоря могут использовать псевдоселектор: hover.

0 голосов
/ 26 января 2010

да, может быть, что-то вроде этого:

#subMenue #menueLink {
visibility: hidden;
}


#subMenue:hover #menueLink {
visibility: visible;
}
0 голосов
/ 26 января 2010

Это невозможно в CSS. Вам придется применить :hover к #subMenue самому (что, очевидно, не то, что вам нужно в этом сценарии, плюс, в любом случае, оно бессмысленно, так как #subMenue скрыто, так что вы не можете технически навести на него курсор) или использовать JavaScript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...