border on hover Элемент списка

У меня проблема со списком в html.border on hover Элемент списка

Я хочу базовую функциональность: когда пользователь наводит указатель на элемент списка, его цвет верхнего края и его родственный брат меняются на красный;

Так что, если у меня есть HTML как это:

<dl> 
    <dt>Example 1</dt> 
    <dd>Description 1</dd> 

    <dt>Example 2</dt> 
    <dd>Description 2</dd> 

    <dt>Example 3</dt> 
    <dd>Description 3</dd> 
</dl>

и CSS:

dd { 
    display: none; 
} 

dt { 
    border-top: 1px solid black; 
} 

dt:last-of-type { 
    border-bottom: 1px solid black; 
} 

dt:hover { 
    border-top: 1px solid red; 
} 

dt:hover:last-of-type { 
    border-bottom: 1px solid red; 
} 

dt:hover + dd + dt { 
    border-top: 1px solid red; 
}

Я не получить ожидаемого результата. Если я надвигаюсь на первый элемент, только верхние границы меняются на красный. Если я нахожусь на третьем элементе, то на втором, а затем на первом, граница меняется на красный для второго элемента и сначала, но должна только сначала в последнем состоянии. Почему это происходит?

источник

2013-06-07 JK2

Не могли бы вы предоставить нам http://jsfiddle.net? –

не могли бы вы объяснить, что вы называете элементом? это название (dt) или описание (dd)? также, что меняется на красный? как верхние границы названия и описания, так и просто название? – Joum

Странно, я вижу, что граница остается красной даже после зависания над третьим '

' в Chrome 27, но не FF 21 .. это то, о чем вы говорите? – Adrift

Это, кажется, случай ошибки Webkit с несколькими соседними братьями и сестрами, которые были вокруг в течение многих лет. См. one of many reports. Я тестировал в Firefox 21 и IE10 без проблем.

Here's модифицированная версия скрипки Зенита, которая демонстрирует правильное поведение для один смежный селектор в Chrome/Webkit. Я опустил dd и скорректировал селектор CSS на dt:hover + dt (просто для демонстрации, это, конечно, не имеет смысла).

Были проблемы с CSS-хаками для решения этой проблемы, но они вызывают проблемы на определенных платформах. Ваш лучший вариант, вероятно, для достижения желаемого эффекта с использованием другого подхода.

(К сожалению, это, вероятно, принадлежит в комментариях к вашему вопросу, но я до сих пор не хватает требуемой репутации)

источник

2013-06-07 15:12:24 kkoala

Я вижу, что он ведет себя так, как я ожидаю, в Firefox, но, похоже, это ошибка в Webkit, как вы сказали. Теперь мне нужно подумать, как обойти эту проблему. – JK2

Ok, так что я установил его, добавив одну строку:

dt:hover ~ dt {}

Сейчас он работает в Chrome тоже.

источник

2013-06-07 16:26:14 JK2

border on hover Элемент списка

ответ

Смежные вопросы