Hover Not Working On Nested SPAN

Question

I would like to change the background-color and color when I hover over the #startButton. However, nothing changes in my current code (below).

#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

First of all # is used for id...use . notation for element class

Also your code will not work if you used ., because the inline css comes first...So try to remove inline css and write it in separate css file like you have written :hover code...

Also no need to write the same css property on :hover if value is not changed like background-color

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