Change color of hover button

Thanks for using Tracks!

This CSS will make the menu links change colors when you hover over them:

.menu-primary ul a:hover,
.menu-primary ul a:active,
.menu-primary ul a:focus {
  color: blue;
}

And if you want them to stay a certain color after being visited, you can add this CSS too:

.menu-primary ul a:visited {
  color: blue;
}

Thanks a lot, I also have 2 another little questions.

– I have a little issue when I change the color of the background of my website with the following code

body,
.excerpt,
.main,
.menu-primary ul,
#site-header {
	background: #000;
}

It also change the background of the posts on the main page of the website on mobile version. Do you know how I can fix that ?

– Second question : I would like to display like a purple filter with low opacity on the featured images on the main page (which is set as blog archives), and I want the filter to disapear when you have your mouse on it, I don’t know if it’s clear haha.

Is it possible to do ?

Thanks a lot ??

Here’s an updated version of that code that won’t affect the background of the posts on the homepage:

body,
.main,
.menu-primary ul,
#site-header {
  background: #000;
}

The other customization is actually pretty easy with the use of a pseudo-element, like this:

.featured-image:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: purple;
	opacity: 0.5;
	transition: opacity 0.2s;
}
.featured-image:hover:after {
	opacity: 0;
}

You can replace “purple” with a distinct shade using a hex code. The opacity is set to 50% (0.5) and you can use a range of anywhere from 0.1-1 to change that. Lastly, I added a transition that lasts 0.2 seconds so it looks smoother, and you can change the 0.2s value to make the animation slower or longer if you’d like.

• This reply was modified 5 years, 10 months ago by Ben Sibley.