addisonpann Posted November 26, 2021 Share Posted November 26, 2021 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
Beyondspace Posted November 27, 2021 Share Posted November 27, 2021 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? 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
addisonpann Posted December 10, 2021 Author Share Posted December 10, 2021 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. Link to comment
addisonpann Posted December 10, 2021 Author Share Posted December 10, 2021 (edited) @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 December 10, 2021 by addisonpann Link to comment
Solution Beyondspace Posted December 10, 2021 Solution Share Posted December 10, 2021 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 Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too addisonpann 1 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
addisonpann Posted December 11, 2021 Author Share Posted December 11, 2021 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 🙂 Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment