Вопросы Теги

Как я могу повлиять на css div, если он не является дочерним из того, на котором я наводил курсор? [Дубликат]

Регулярное выражение может использоваться для соответствия подстроке времени в строке, возвращаемой методом toString() объекта Date, которая отформатирована следующим образом: «Thu Jul 05 2012 02:45:12 GMT + 0100 (GMT Дневное время) ". Обратите внимание, что это решение использует время с эпохи: полночь 1 января 1970 года. Это решение может быть однострочным, хотя его разделение значительно облегчает его понимание. 

function secondsToTime(seconds) {
    var start = new Date(1970, 1, 1, 0, 0, 0, 0).getTime();
    var end = new Date(1970, 1, 1, 0, 0, parseInt(seconds), 0).getTime();
    var duration = end - start;

    return new Date(duration).toString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
}
320
задан TylerH 24 March 2016 в 21:39
поделиться

5 ответов

Если куб находится непосредственно внутри контейнера: 

#container:hover > #cube { background-color: yellow; }

Если куб рядом с (после закрытия контейнера), контейнер: 

#container:hover + #cube { background-color: yellow; }

Если куб где-то внутри контейнера: 

#container:hover #cube { background-color: yellow; }

Если куб является дочерним элементом контейнера: 

#container:hover ~ #cube { background-color: yellow; }
686
ответ дан rockfeeler 5 September 2018 в 07:17
поделиться

Использование селектора sibling - это общее решение для стилизации других элементов при наведении курсора на заданный, но оно работает , только если другие элементы следуют за данным в DOM . Что мы можем сделать, когда другие элементы должны быть на самом деле до зависания? Предположим, что мы хотим реализовать виджет оценки уровня сигнала, подобный приведенному ниже:

Это можно легко сделать с использованием модели flexbox CSS, установив flex-direction - reverse, так что элементы отображаются в противоположном порядке от того, который находится в DOM.

Flexbox очень хорошо поддерживается на 95% современных браузеров. 

.rating {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
}
.rating div {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.rating div:hover {
  background-color: lightblue;
}
.rating div[data-rating="1"] {
  height: 5rem;
}
.rating div[data-rating="2"] {
  height: 4rem;
}
.rating div[data-rating="3"] {
  height: 3rem;
}
.rating div[data-rating="4"] {
  height: 2rem;
}
.rating div[data-rating="5"] {
  height: 1rem;
}
.rating div:hover ~ div {
  background-color: lightblue;
}
<div class="rating">
  <div data-rating="1"></div>
  <div data-rating="2"></div>
  <div data-rating="3"></div>
  <div data-rating="4"></div>
  <div data-rating="5"></div>
</div>

22
ответ дан Dan Dascalescu 5 September 2018 в 07:17
поделиться

Только это сработало для меня: 

#container:hover .cube { background-color: yellow; }

Где .cube - CssClass для #cube.

Проверено в Firefox, Chrome и Edge.

6
ответ дан Igor Ivancha 5 September 2018 в 07:17
поделиться

В этом конкретном примере вы можете использовать: 

#container:hover #cube {
    background-color: yellow;   
}

Это работает только с cube - это ребенок из container. Для более сложных сценариев вам нужно будет использовать javascript.

34
ответ дан KyleMit 5 September 2018 в 07:17
поделиться

Вот еще одна идея, которая позволяет вам воздействовать на другие элементы без учета какого-либо конкретного селектора и только с использованием состояния :hover основного элемента.

Для этого я буду полагаться на использование настраиваемых свойств (переменные CSS). Как мы можем прочитать в спецификации :

Пользовательские свойства являются обычными свойствами, поэтому они могут быть объявлены на любом элементе, разрешены с нормальным наследованием и каскадными правилами. ..

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

Вот пример: 

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}
<div id="container">
  <div>
  </div>
</div>

Почему это может быть лучше, чем использование специального селектора в сочетании с hover?

Я могу предоставить по крайней мере 2 причины, которые делают этот метод хорошим:

  1. Если у нас есть много вложенных элементов, которые имеют одни и те же стили, это будет избегайте сложного селектора, чтобы нацелить их на зависание. Используя пользовательские свойства, мы просто изменяем значение при зависании родительского элемента.
  2. Пользовательское свойство может использоваться для замены значения любого свойства, а также его частичного значения. Например, мы можем определить настраиваемое свойство для цвета, и мы используем его в пределах border, linear-gradient, background-color, box-shadow и т. Д. Это позволит нам отказаться от всех этих свойств при наведении.

Вот более сложный пример: 

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

Как мы видим выше, нам нужен только один Объявление CSS для изменения многих свойств различных элементов.

0
ответ дан Temani Afif 5 September 2018 в 07:17
поделиться