CSS - наведение на элемент не применяет стиль к другому

Question

CSS - наведение на элемент не применяет стиль к другому

0

У меня есть проблема с применением стиля к div, когда другой div зависает. Вот мой сценарий:

<div id="nav">
    <div class="logged"></div>
    <div class="nav_child"></div>
</div>

.logged:hover .nav_child {
    display: initial;
}
#nav .nav_child {
    display: none;
}

Но это не сработает. Я также пробовал .logged:hover >.nav_child и .logged:hover +.nav_child и все еще ничего. Он работает только с #nav:hover.nav_child но мне нужно показать его, когда .logged, а не когда #nav.

Есть идеи?

DrKey 04 нояб. 2014, в 03:47

Источник

0

почему бы не сделать это с помощью javascript или jquery?
Johnroe Paulo Cañamaque 04 нояб. 2014, в 02:39
0

попробуйте .nav_child{ display: none; } непосредственно в nav_child без потомка селектора из #nav. jsfiddle.net/aw4ejhys
gp. 04 нояб. 2014, в 02:42
0

Решено, смотрите мой ответ. Спасибо, в любом случае :)
DrKey 04 нояб. 2014, в 02:43
0

@gp. это действительно странно, потому что я попробовал это на своем сайте, и это не работает, но никаких проблем на jsfiddle ..
DrKey 04 нояб. 2014, в 02:45

Показать ещё 2 комментария

Теги:

html

css

hover

4 ответа

0

Here is a good resource that covers this topic http://jsfiddle.net/ThinkingStiff/a3y52/
<div id="nav">
    <div id="one" class="logged"></div>
    <div id="two" class="nav_child"></div>
</div>
#one:hover ~ two,
{
    background-color: black;
    color: white;
}

R.sandeep 04 нояб. 2014, в 05:10

0

Вы были на правильном пути с помощью .logged:hover +.nav_child. Причина, по которой он не работает, заключается в том, что #nav.nav_child имеет более высокую специфичность (потому что он включает в себя идентификатор) и поэтому имеет приоритет над предыдущим правилом.

Да, вы могли бы решить это, перейдя к идентификатору для logged, как это было в вашем собственном ответе, но вместо этого вы можете повысить определенность правила зависания, добавив в свой идентификатор, который у вас уже есть:

#nav .logged:hover + nav_child {

Кстати, такие проблемы можно почти всегда отслеживать, используя инспектор стиля в панели вашего браузера. В этом случае вы увидите оба правила, и вы увидите, что второе было первым. Это легко приведет вас к выводу, что это проблема специфики. Большинство инспекторов стиля дадут вам возможность "подражать" зависающему состоянию.

Для получения дополнительной информации о специфике см. Https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity. В вашем случае ваше первоначальное первое правило имеет спецификацию 20 (два класса), а второе - 101 (один идентификатор и один класс).

user663031 04 нояб. 2014, в 02:20

0

@gp Можете ли вы привести пример работы дисплея, когда цвет не работает?
user663031 04 нояб. 2014, в 04:58

0

Даже просто удалите #nav из дочернего и +

.logged:hover+.nav_child {
    display:initial;
}
 .nav_child {
    display: none;
}

http://jsfiddle.net/dz22m10y/

Ali Adravi 04 нояб. 2014, в 00:28

Ещё вопросы

почему бы не сделать это с помощью javascript или jquery?
попробуйте .nav_child{ display: none; } непосредственно в nav_child без потомка селектора из #nav. jsfiddle.net/aw4ejhys
Решено, смотрите мой ответ. Спасибо, в любом случае :)
@gp. это действительно странно, потому что я попробовал это на своем сайте, и это не работает, но никаких проблем на jsfiddle ..
@gp Можете ли вы привести пример работы дисплея, когда цвет не работает?

DrKey · Accepted Answer · 2014-11-04T01-13-00.000Z

Просто решил с Смежным соболиным комбинатором. Я объявляю и вызываю "logged" как id и добавляю + между.logged: hover и.nav_child, он работает.

Ссылка: Смежный комбонатор: http://css-tricks.com/child-and-sibling-selectors

Старый код: http://jsfiddle.net/8rdh7m2j/

Рабочий код:

<div id="nav">
<div class="logged" id="logged">Hello</div>
<div class="nav_child">Puff</div>
</div>
#logged:hover + .nav_child {
display: initial;
}

#nav .nav_child {
display: none;
}

Демо: http://jsfiddle.net/hwh3o8u0/1/

Это потому, что вы используете соседний братский комбинатор: css-tricks.com/child-and-sibling-selectors