Наследование псевдо-классов CSS - PullRequest
Новая
       3

Наследование псевдо-классов CSS

2 голосов
/ 06 июля 2011

Я пытаюсь понять, почему мой CSS работает в Opera, но не работает в Firefox. Эффект, который мне нужен, - просто кнопка, которая при наведении курсора отображает выпадающий список. 

<html>
<head>

<style>

.dropcontrol {
    background-color: red;
}

.dropdown {
    display: none;
}

.dropcontrol:hover .dropdown {
    display: block;
}

</style>

</head>
<body>

<div class='dropcontrol'>TEST

    <div class='dropdown'>

        <ul>

            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>

        </ul>

    </div>

</div>
</body>
</html>

Проблема, похоже, .dropcontrol:hover .dropdown. Любые идеи о том, почему это будет работать в Opera, но не Firefox?

Спасибо за ваше время.

Ответы [ 4 ]

2 голосов
/ 06 июля 2011

Я не уверен, почему ваша конкретная установка не работает, но есть лучшие способы сделать это.

Для начала, как правило, лучше делать то, что вы делаете со всеми списками. Так что у вас будет что-то вроде: 

<ul class="dropcontrol">
  <li>Test
    <ul class="dropdown">
       <li>Test 1</li>
       <li>Test 2</li>
       <li>Test 3</li>
    </ul>
  </li>
</ul>

Если вам нужно сохранить dropcontrol как div, вы можете очистить то, что у вас есть, удалив dropdown div и присвоив тегу ul класс dropdown.

Кроме того, в зависимости от того, что именно вы пытаетесь сделать, элемент <select> также может быть лучшим выбором.

1 голос
/ 06 июля 2011

Хорошо, я не совсем уверен, почему это меняет работу Firefox, но ответом было включить тег doctype как xhtml-transitional. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/    xhtml1/DTD/xhtml1-transitional.dtd">
1 голос
/ 06 июля 2011

Вот одно из решений для Firefox. Я никогда не использовал Opera, и я никогда не видел, чтобы раскрывающийся список пытался сделать так, как вы его опубликовали. Вот как я обычно это делаю. 

.dropcontrol {
background-color: red;
}

.dropcontrol li ul {
visibility:hidden;
}

.dropcontrol li:hover ul {
visibility:visible;
}


<div class='dropcontrol'><ul><li>TEST

    <ul>

        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>

    </ul>
</li></ul>

</div>
0 голосов
/ 06 июля 2011

Я думаю, что это связано с этим кодом: 

.dropcontrol:hover .dropdown {
    display: block;
}

Что произойдет, если вы добавите .dropdown:hover?Это помогает?У вас также могут возникнуть другие проблемы с css, попробуйте добавить !important, что также может помочь.

С другой стороны, если у вас проблемы только с firefox или только с Opera, вы можете сделать что-то подобноекодировать CSS для каждого конкретного браузера (может быть полезно, как только вы лучше знаете проблему)

FireFox 

@-moz-document url-prefix() {
    #someID {
        position: relative;
        top: -1px;
    }
}

Opera 

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    #my-id { clear:right; }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...