Pagination title/icon color change on hover

Site URL: https://www.addisonpann.art/

URL password: toast

So far (with help from this community) I've added custom CSS to change the color of my Portfolio pagination when it's in a hover state. What I'd like to happen is have the caret also change color upon hover.

Furthermore, is there a way to have both the title and caret icon change color when only one is being hovered over?

Thanks in advance, and please let me know if you need any further information.

13 hours ago, addisonpann said:

Site URL: https://www.addisonpann.art/

URL password: toast

So far (with help from this community) I've added custom CSS to change the color of my Portfolio pagination when it's in a hover state. What I'd like to happen is have the caret also change color upon hover.

Furthermore, is there a way to have both the title and caret icon change color when only one is being hovered over?

Thanks in advance, and please let me know if you need any further information.

How can I find the Portfolio pagination? Can you share a screenshot of what you intend to implement?

On 11/27/2021 at 2:26 AM, bangank36 said:

How can I find the Portfolio pagination? Can you share a screenshot of what you intend to implement?

Portfolio pagination can be found by selecting either Graphic Design, Hand Drawn, or Photography, and scrolling to the bottom. Pagination will be on the left/right/both sides of the screen, dependent upon which section you're in.

I've attached a screenshot of the bottom of the Hand Drawn page. On the right, you'll see the pagination text, when hovered over, changes color, but the caret does not.

P.S. Thanks for your reply. Apologies it took so long to get back to you. I'll turn on notifications so I can stay on top of this in the future.

@bangank36

I was able to get the caret to change color in hover state by using the following CSS code...

.white.item-pagination[data-collection-type^="portfolio"] .item-pagination-icon svg:hover {
    stroke: #F599A4;
}

...but still curious if there's some way to get both the caret and pagination text to both change color, even when only one is hovered over.

7 hours ago, bangank36 said:

.item-pagination-link:hover .item-pagination-icon svg {
  stroke: #e19d9d !important;
}

.item-pagination-link:hover .item-pagination-title {
  color: #e19d9d !important;
}

Thank you so much for your help. This worked like a charm!

Now on to the next CSS project 🙂