Можно ли изменить внешний вид нескольких элементов при наведении курсора без Javascript, основываясь на имени класса? - PullRequest
Новая
       1

Можно ли изменить внешний вид нескольких элементов при наведении курсора без Javascript, основываясь на имени класса?

2 голосов
/ 15 сентября 2010

У меня есть структура div с внутри div с, что-то вроде: 

<div>
    <div>
        <div class='a'>Hello</div>
        <div class='a'>Stack</div>
        <div>Overflow</div>
    </div>
    <div>
        <div>You</div>
        <div class='b'>Are</div>
        <div class='b'>The Best</div>
    </div>
    <div>
        <div>Have</div>
        <div class='b'>a nice</div>
        <div>Day !!</div>
    </div>
</div>

Я бы хотел, чтобы все div с классом a меняли цвет фона, когда один из них наведен мышью. То же самое для всех div с классом b: при наведении одного из div с с классом b все div с классом b должны изменить цвет фона.

Возможно ли реализовать это поведение без Javascript ?

Если ответ отрицательный:
Возможно ли это, если известно, что все div с классом a являются последовательными div с на одном и том же уровне (т. Е. Родные братья)?

Я могу добавить и другие классы к div s, если необходимо.

Ответы [ 3 ]

3 голосов
/ 15 сентября 2010

Вы можете получить его "наполовину работающим" в более простом случае, когда нет контейнера <div> s: 

<div>
  <div class='a'>Hello</div>
  <div class='a'>Stack</div>
  <div>Overflow</div>
  <div class='b'>Are</div>
  <div class='b'>The Best</div>
  <div>Have</div>
  <div class='b'>a nice</div>
  <div>Day !!</div>
</div>

Тогда вы можете использовать общий братский комбинатор , сК сожалению, он работает только для элементов, которые идут после элемента, описанного слева.Так, например, если вы зависли над <div>, содержащим «The Best», только это и «a nice» <div> изменили бы фон: 

div.b:hover, div.b:hover ~ div.b {
    background-color:#CCCCCC;
}

Я не смогоднако придумать способ, который бы полностью позаботился о вашем сценарии только через CSS.Я склоняюсь к тому, что другие говорили о том, что это невозможно (даже в упрощенном случае) прямо сейчас.

0 голосов
/ 15 сентября 2010

Нет.Не без Javascript.Селекторы CSS предназначены для применения стилей к каждому элементу, который соответствует селектору индивидуально, поэтому по замыслу этого не произойдет

Источник

http://www.w3.org/TR/CSS2/selector.html#selector-syntax

0 голосов
/ 15 сентября 2010

Я не могу придумать никакого решения, за исключением того, что есть css-parent-selectors (и, насколько я и Google знаю, их не существует).если бы были такие вещи, вы могли бы сделать что-то вроде выбора верхнего родительского элемента для элемента hovered, а затем выбрать все элементы вашего класса в этом верхнем элементе (будет выглядеть как .a < parent < parent < parent .a{ /*styles*/ }) - но, как сказано, это селекторне существует, поэтому ответ на ваш вопрос: нет

...