Jump to content

Pagination title/icon color change on hover

Go to solution Solved by Beyondspace,

Recommended Posts

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.

Link to comment
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?

image.thumb.png.751b93217635cb1d913238b085312722.png

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 weeks later...
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.

Screen Shot 2021-12-10 at 11.29.20 AM.png

Link to comment

@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.

Edited by addisonpann
Link to comment
  • Solution
3 hours ago, addisonpann said:

@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.

Try

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

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

And the testing result after applying

image.thumb.png.ae0bc7bd970b82c8427b237766e5577f.png

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.