# thing1: hover # thing2 {} не работает?

0

Мне нужна помощь с CSS, я пытаюсь сделать это, когда мышь зависает над #konnichiwa, она отображает #konnichiwab. При изменении вещей с помощью #konnichiwa: hover и #konnichiwab: зависание, это работает, это просто выбор других идентификаторов, которые имеют проблемы. Извините, я забыл упомянуть, я тоже пробовал селектор "+". Еще не повезло.

Второе редактирование: из того, что я понимаю, селектор sibling должен выбрать элемент рядом с выбранным в коде? Я изложил несколько строк в этом вопросе, прошу прощения. Konnichiwa и konnichiwab не находятся рядом друг с другом. Это потому, что я положил konnichiwa в div для стилизации, и я не хочу применять этот стиль для konnichiwab. Вероятно, я мог бы решить эту проблему, удалив div и добавив класс к konnichiwa, но сначала я хотел бы увидеть, есть ли другое решение, которое не требует, чтобы они были рядом друг с другом.

<span id="konnichiwa">こんにちは</span>

<div class="tbubs" id="konnichiwab">Hello</div>

#konnichiwa:hover + #konnichiwab {
    color: blue;
    display:block;
}

.tbubs 
{
    position: absolute;
    margin-top: 115px;
    margin-left: 35px;
    background-color:#ea3030;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
}

.tbubs:after 
{
    content: "";
    position: absolute;
    bottom: -15px;
    border-style: solid;
    border-width: 15px 10px 0;
    border-color: #ea3030 transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.tbubs:after 
{
    content: "";
    position: absolute;
    bottom: -15px;
    border-style: solid;
    border-width: 15px 10px 0;
    border-color: #ea3030 transparent;
    display: block;
    width: 0;
    z-index: 1;
}
  • 2
    Чтобы этот селектор работал как положено, #konnichiwab должен быть внутри #konnichiwa . В настоящее время они братья и сестры.
  • 2
    Пробел является наследующим комбинатором, возможно, вы хотите использовать соседний братский комбинатор: + вместо пробела. reference.sitepoint.com/css/combinators
Показать ещё 1 комментарий
Теги:
hover

3 ответа

1

Чтобы этот селектор работал, как ожидалось, #konnichiwab должен находиться внутри #konnichiwa. В настоящее время они братья и сестры.

Вы можете использовать соседний селектор, чтобы обойти это.

#konnichiwa:hover + #konnichiwab {
    color: blue;
    display:block;
}

Демо: http://jsfiddle.net/X98tE/

0

Другие предлагают adjacent sibling selector (по уважительной причине - он может работать в зависимости от вашей маркировки...)

Что-то вроде http://jsfiddle.net/KaHP5/1/

Однако я хотел бы предложить альтернативу: general sibling selector. Это CSS3, поэтому поддержка IE является проблемой (в первую очередь IE 7 и 8 являются ошибками, но они работают... Reference)

Здесь скрипка: http://jsfiddle.net/KaHP5/

Как выглядит ваш CSS:

/* hover nested element */
#parent:hover ~ div #child {
    background-color: yellow;
}

Самое замечательное в том, что #konnichiwa и #konnichiwab родитель (или дедушка) не должны быть прямыми братьями и сестрами с общим селектором сестры (так как они должны быть с adjacent sibling selector).

0

Использование может использовать смежный комбинатор (+). Поэтому всякий раз, когда вы наводите курсор на первый селектор, свойства будут применены ко второму селектору, то есть к его соседству.

#konnichiwa:hover + #konnichiwab {
    color: blue;
    display:block;
}

Пожалуйста, прочтите этот смежный комбинатор

Ещё вопросы

Сообщество Overcoder
Наверх
Меню