How to change link 'hover' colors?

Resolved dissinglink
(@dissinglink)

9 years, 1 month ago

In the post https://wordpress.org/support/topic/how-do-i-change-the-color-1?replies=9 we see how to change the color of selected Menu items and the mouseover color of the rectangles in the Portfolio view. But then I am missing how to change the mouseover (or ‘hover’ color of links in menus when the mouse pointer is moving over them.

I tried to use the developer tools mentioned but with no luck. I can see that maybe one element I am looking for is the entry-title, another is the portfolio-entry-media, and yet another is menu-item-118, but I guess there should be a more general way of setting all these in one go?
The page I am working on is http://www.dgraf.dk. Thank you for your support.

Viewing 2 replies - 1 through 2 (of 2 total)

(@sacredpath)

Automattic Happiness Engineer

Hi there, it all depends on the theme. Some set a single color for links and hover links, no matter where they are, but most themes will have multiple settings. For menu hover color, you would use this and edit the color code as desired.

.main-navigation ul li a:hover {
    color: green;
}

For general linked text within the content area, this would be what you would need.

a:hover, a:focus, a:active {
    color: yellow;
}

For portfolio entry titles, this would be what you would need.

.entry-title a:hover, .entry-title a:focus, .entry-title a:active {
    color: blue;
}

Thread Starter

dissinglink

(@dissinglink)

9 years, 1 month ago

That helped a lot, thank you! For future reference and for others to copy I give you here my CSS entries (I know, green and #009900 is the same, but the number gives me a chance to play around with the color):

/*
Removing title on Portfolio page
*/
.post-type-archive-jetpack-portfolio .page-title {
	display: none;
}

/*
Removing title bar on Portfolio page
*/
.post-type-archive-jetpack-portfolio .page-header:after {
	height: 0;
}

/*
Setting menu selected and mouseover colors
*/
.main-navigation ul .current_page_item > a, .main-navigation ul .current-menu-item > a {
	color: #009900;
}

.main-navigation ul li a:hover {
	color: #009900;
}

/*
The portfolio thumbnails color
*/
.portfolio-thumbnail a:before {
	background: none repeat scroll 0 0 padding-box content-box #009900;
}

/*
The portfolio entries color
*/
.entry-title a:hover, .entry-title a:focus, .entry-title a:active {
	color: #009900;
}

/*
Normal links when mouseover and selected
*/
a:hover, a:focus, a:active {
	color: green;
}

/*
Normal links are just black until the mouse arrives
*/
a {
	color: black;
}

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How to change link 'hover' colors?’ is closed to new replies.