父悬停时部分改变，元素悬停时完全改变

Question

我想让 UI 元素在悬停在其父元素 div 上时略微淡入，然后在悬停在 UI 元素本身时完全淡入。但似乎如果我设置父级悬停，悬停在子级上没有任何作用。

HTML:

<div id="parent">
  <div id="child">
  </div> <!-- end child -->
</div> <!-- end parent -->

CSS:

#parent {
  width: 200px;
  height: 200px;
  background-color: black;
}

#child {
  width: 100px;
  height: 100px;
  background-color: white;
  opacity: 0.3;
}

/* fades in partially, looks nice */
#parent:hover #child {
  opacity: 0.6;
}

/* doesn't seem to do anything! */
#child:hover {
  opacity: 1;
}

JSFiddle version

Answer 1

添加转场

#child {
  width: 100px;
  height: 100px;
  background-color: white;
  opacity: 0.3;
  /* added these */
  -webkit-transition: background-color 500ms ease-out 1s;
  -moz-transition: background-color 500ms ease-out 1s;
  -o-transition: background-color 500ms ease-out 1s;
  transition: background-color 500ms ease-out 1s;
}

Answer 2

这是一个特异性问题。 #parent:hover #child 选择器 "winning out" 优于 #child:hover。将第二个更改为 #parent:hover #child:hover（或只是 #parent #child:hover），您应该已设置。 https://jsfiddle.net/1khjo42q/1/

Answer 3

问题在于规则 #parent:hover #child 的优先级高于 #child:hover，因为它描述了 DOM 树中的更多元素。

增加#child:hover的优先级有两种方式：

用

    #parent #child:hover

将!important添加到opacity: 1:

    opacity: 1 !important;

Fiddle

#parent {
  width: 200px;
  height: 200px;
  background-color: black;
}

#child {
  width: 100px;
  height: 100px;
  background-color: white;
  opacity: 0.3;
}

#parent:hover #child {
  opacity: 0.6;
}

#parent #child:hover {
  opacity: 1;
}

<div id="parent">
  <div id="child">
  </div> <!-- end child -->
</div> <!-- end parent -->

PS：您可能还想添加一个 transition。

父悬停时部分改变，元素悬停时完全改变

Partial change on parent hover, full change on element hover

html

css

user-interface

hover