悬停不适用于嵌套 SPAN

Question

当我将鼠标悬停在 #startButton 上时，我想更改 background-color 和 color。但是，我当前的代码（如下）没有任何变化。

#startButton:hover {
  color: blue;
  background-color: #fff;
}

<a href='#arrow' class='startButton' style='background-color: #fff; color: #555;' id='brickButton'>
  <span id='theText'>Start Your Search</span>
</a>

Answer 1

请改用此 CSS，因为 startButton 是 class 而不是 ID。

.startButton:hover > span {
  color: blue;
  background-color: #fff;
}

Answer 2

将您的 css 更改为

#brickButton>span:hover {
color: blue;
background-color: #fff;
}

或

.startButton>span:hover {
  color: blue;
  background-color: #fff;
}

Answer 3

使用下面CSS:

.startButton span:hover {
color: blue;
background-color: #fff;
}

JSFiddler: https://jsfiddle.net/z34g50sc/2/

Answer 4

首先 # 用于 id...对元素 class

使用 . 符号

此外，如果您使用 .，您的代码将无法运行，因为内联 css 排在第一位...因此请尝试删除内联 css 并将其写在单独的 css 文件就像你写了 :hover 代码...

如果值没有像 background-color

那样改变，也不需要在 :hover 上写相同的 css 属性

.startButton {
  background-color: #fff;
  color: #555;
}

.startButton:hover {
  color: blue;
}

<a href='#arrow' class='startButton' id=' brickButton '>
  <span id='theText '>Start Your Search</span>
</a>

悬停不适用于嵌套 SPAN

Hover Not Working On Nested SPAN

html

css

hover

pseudo-class