Change color of hover button

  • unmeltmagazine

    (@unmeltmagazine)


    7 years ago

    Hello everyone !

    Sorry if my English is not precise enough to describe what I want to do.

    I wanted to know if it’s possible to change the color of the hover button in the primary menu by the Custom CSS ? I also want the buttons to stay of that color once you have click on them, is it possible ?

    Thank you for your help 🙂

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    7 years ago

    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;
}
    Thread Starter unmeltmagazine

    (@unmeltmagazine)

    7 years ago

    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 🙂

    Theme Author Ben Sibley

    (@bensibley)

    7 years ago

    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 7 years ago by Ben Sibley.
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Change color of hover button’ is closed to new replies.