В чем разница между parent *: hover {} и parent: hover * {}? - PullRequest
Новая
       1

В чем разница между parent *: hover {} и parent: hover * {}?

0 голосов
/ 08 июня 2018

Мне интересно, в чем разница между селекторами CSS.Если я изменяю это: 

.parent *:hover {}

на это: 

.parent:hover * {}

в следующем коде:

#child {
  width: 100%;
  height: 100%;
}
.parent {
  background-color: green;
  width: 100px;
  height: 100px;
}

.parent:hover * { 
  background-color: red;
}
<html>
  <head>
    <title>HTML Sample</title>
  </head>
  <body>
    <div class="parent">
      <div id="child"></div>
    </div>
  </body>
</html>

Ничего не меняется и hover Эффект остается прежним.Я скучаю по чему-то здесь?

Ответы [ 3 ]

0 голосов
/ 08 июня 2018

Легко.Пожалуйста, наведите курсор на отца, а затем на ребенка. 

#child {
  width: 100%;
  height: 100%;
}
.parent {
  background-color: green;
  width: 100px;
  height: 100px;
  padding: 100px;
}

.parent:hover * { 
  background-color: red;
}

.parent *:hover { 
  background-color: blue;
}
<html>
  <head>
    <title>HTML Sample</title>
  </head>
  <body>
    <div class="parent">
      <div id="child"></div>
    </div>
  </body>
</html>
0 голосов
/ 08 июня 2018

Для .parent:hover * {} селектор применяется к дочерним элементам, как только вы наводите курсор на любую часть родительского элемента.Вы можете увидеть это в первом поле , наведя указатель мыши на зеленую часть (т.е. отступ родительского элемента), и цвет дочернего элемента изменится.

Для .parent *:hover {} селектор срабатывает толькокогда ребенок накрываетсяТаким образом, в приведенном ниже фрагменте, для второго поля , когда вы наводите курсор на зеленую часть (т.е. отступ родительского элемента), цвет дочернего элемента не изменяется.Но если вы наведите курсор на белую часть, которая является коробкой ребенка, цвет изменится. 

#child {
  width: 100%;
  height: 100%;
}
.parent,
.parent2{
  background-color: green;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  padding: 50px;
}

.parent *, .parent2 *
{
  background-color: white;
  font-size: 50px;
}

.parent:hover * { 
  background-color: red;
}

.parent2 *:hover { 
  background-color: red;
}
<html>
  <head>
    <title>HTML Sample</title>
  </head>
  <body>
    <div class="parent">
      <div id="child">1</div>
    </div>
    
    <div class="parent2">
      <div id="child">2</div>
    </div>
  </body>
</html>
0 голосов
/ 08 июня 2018

  • .parent *:hover {} означает: нацелить всех потомков любого элемента с помощью class="parent", находясь в состоянии при наведении курсора " (то есть, когда находится потомок)

  • .parent:hover * {} означает для всех потомков любого элемента с class="parent", в то время как элемент с class="parent" находится в состоянии наведения (обратите внимание, что если потомокэлемент находится, как и .parent, даже если они не образуют единой связной визуальной единицы (например, используется position: absolute).

Если ваш <div class="parent">имеет несколько дочерних элементов, тогда первое правило (.parent *:hover {}) будет влиять только на одного потомка , тогда как этот конкретный потомок находится под контролем - так что если пользователь наведет курсор мыши на другой элемент, тогда стиль-правило изменится.

Второе правило таково, что при условии, что .parent находится при наведении мыши, тогда стили всех потомков будут изменены. Это не очень хорошее правило стиля, потому что селектор потомков выберет все в.parent (например, каждый <span>, <a>, <p> и т. Д.).Возможно, вам следует использовать более конкретный селектор.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...