代码之家 › 专栏 › 技术社区 › gokareless

parent:hover{}和parent:hover{}有什么区别?

css-selectors css

gokareless · 技术社区 · 8 年前

我想知道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>

什么都没变 和悬停效果不变。我是不是错过了smth?

3 回复 | 直到 8 年前

Dai 8 年前

.parent *:hover {} 手段: 以任何元素的所有子代为目标 class="parent" ,当处于悬停状态时“ (即后代悬停时)
.parent:hover * {} 方法 以任何元素的所有子代为目标 class=“父级” ,而元素 class=“父级” 处于悬停状态 (注意,如果子元素悬停,则 .parent ,即使它们没有形成一个统一的视觉单元(例如 position: absolute 正在使用)。

如果你 <div class="parent"> 有多个子项,则第一条规则( .parent*:悬停{} )只会影响一个后代虽然这个特定的子体是悬停的-所以如果用户鼠标悬停在另一个元素上,样式规则就会改变。

第二条规则是这样的,只要 亲本 如果鼠标悬停,则所有子代都将更改其样式。这不是一个好的样式规则,因为子代选择器将选择一切在下面 亲本 (例如,每一个 <span> , <a> , <p> 等)。您可能应该使用更具体的选择器。

Taras Gordienko 8 年前

容易的。请先停在鹦鹉旁边,再停在孩子旁边。

#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>

Nisarg Shah 8 年前

为了 .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>

parent*:hover{}和parent:hover*{}有什么区别?

parent:hover{}和parent:hover{}有什么区别?