Creating colour change on mouse hover with CSS

• 

  esperonwp · Member · Mar 24, 2024 at 3:44 pm

  • Copy link
  • Add topic to favorites

  Hi,

  For my website I have been trying to make certain elements change colour when a person hovers their mouse over them. Previous topics on this forum note that, for users who don’t have access to WordPress plugins, this can be done with CSS. The following code worked to make button blocks change their background colour when hovered…

  a:hover.wp-block-button__link {
  background-color: #e4e4e4 !important;
  }

  …So I tried and failed to adapt it for my header 1 and navigation blocks to make their text change colour. I’m not a coder so I will have definitely butchered it somewhere, though. If anybody could point me in the direction of what I need to change in this code I would really appreciate it!

  a:hover.wp-block-h1 {
  color: #e4e4e4 !important;
  }

  a:hover.wp-block-navigation {
  color: #e4e4e4 !important;
  }

  The blog I need help with is: (visible only to logged in users)