Question

我希望在悬停在其父div上时稍微淡入UI元素，然后将鼠标悬停在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

问题是规则#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。

Answer 2

这是一个特殊问题。 #parent:hover #child选择器在#child:hover上“赢了”。将第二个更改为#parent:hover #child:hover（或仅#parent #child:hover），您应该设置。 https://jsfiddle.net/1khjo42q/1/

Answer 3

添加转场

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

父悬停的部分更改，元素悬停的完全更改

3 个答案: