[Resolved] Styling Pagination Links

Thanks ! This works for me as well.

I tried to do the same with category pages and navigators, This works:

.page-numbers {
	display: inline-block;
	background-color: #628907;
	padding: 5px 10px 5px 10px;
	color: #fff;
}

This also

.page-numbers.current {
	background-color: #fff;
	padding: 5px 10px 5px 10px;
	color: #628907;
}

But this doesn’t:

.page-numbers a:hover {
	display: inline-block;
	background-color: #90CB0D;
	padding: 5px 10px 5px 10px;
	color: #fff;
}

And this doesn’t work either:

next.page-numbers a:hover {
	background-color: #90CB0D;
	padding: 5px 10px 5px 10px;
	color: #fff;
}

How can I define an a:hover style ?

Thanks !

Frans

Thanks !

This is a (single) post, where .page-links (and page-links a:hover) work correctly (color change on mouse over):

https://medische-ethiek.nl/voltooid-leven-2/

I tried to do the same styling on category pages. This is a category overview where .page-numbers work, but the a:hover doesn’t:

https://medische-ethiek.nl/category/actueel/

Frans

Thanks ! .nav-links a:hover is the solution. Unfortunately, .nav-links a:focus did not work. I used a combination of .nav-links and .page-numbers:

.page-numbers {
	display: inline-block;
	background-color: #628907;
	padding: 5px 10px 5px 10px;
	color: #fff;
}
.nav-links a {
	color: #fff;
}
.page-numbers.current {
	background-color: #fff;
	padding: 5px 10px 5px 10px;
	color: #628907;
}
.nav-links {
		text-align: right;
}
.nav-links a:hover {
	background-color: #90CB0D;
	padding: 5px 10px 5px 10px;
	color: #fff;
}

Thanks !

Frans

Today I saw that there is a situation in which these solutions don’t work: the navigation within WP pages. The above mentioned solutions address navigation in posts, categories and archives, but not pages. Especially, the a:hover does not work. Both .page-numbers a: hover {} and .nav-links a:hover {} do not have effect in this situation. What class should be used for the a:hover in page navigation ? If I inspect the page with Chrome, I can only find the page-numbers class.

E.g (bottom): https://medische-ethiek.nl/publicaties-katholieke-stichting-medische-ethiek/

Thanks !

Frans

Thanks! The class is correct, but how do I add the a:hover. Adding after not(.current) with or without colon does not work.

Frans

Sorry, I did not explain my problem clearly.

This works, but it is applied permanently (on pages):

.page-numbers:not(.current) {
    background: #222;
    color: #fff;
}

However, I want to have this effect only on mouse over on links. I tried:

.page-numbers:not(.current) a:hover {
    background: #222;
    color: #fff;
}

.page-numbers a:not(.current):hover {
    background: #222;
    color: #fff;
}

.page-numbers a:hover:not(.current) {
    background: #222;
    color: #fff;
}

Those three stylings do not do anything, also the permanent effect of the previous solution has disappeared.

So, how can I get in the a:hover together with the :not(.current) ?

Frans