Jump to content

Create hover state for text block - change colours?

Recommended Posts

Hi, I'm working on a section of a homepage where I'm trying to show a variety of different technologies offered by a client.

There's currently a grid of 6 text blocks (which I've applied a background to, to make them look like sort of buttons). Is there a way to make the colour of the background and text change when hovering over?

And is there a way to make the whole "block" clickable, rather than having the "Learn more >" text that I'm currently using?

Thanks!

Screenshot 2023-12-06 at 21.52.54.png

Link to comment
  • Replies 9
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 months later...
On 12/8/2023 at 7:17 PM, tuanphan said:

#1. You can share link to this page?

#2. We can use CSS code, my idea is use CSS absolute to make learn more cover whole block (then make learn more invisible with opacity 0 code)

@tuanphan, i'm trying to do the same thing as requested above on my website. Can you help? I already have css in place to change the background color on hover, but i'd like to change the text color from black to white at the same time. I'd also like to make each block clickable to open up another page. The website is: https://www.mugacarpentry.com/portfolio-option-1. Thanks!

Link to comment
On 4/25/2024 at 10:21 AM, Quadrant said:

@tuanphan, i'm trying to do the same thing as requested above on my website. Can you help? I already have css in place to change the background color on hover, but i'd like to change the text color from black to white at the same time. I'd also like to make each block clickable to open up another page. The website is: https://www.mugacarpentry.com/portfolio-option-1. Thanks!

What is password?

image.png.ed9551df39e6ad16216d316aa2efa2ba.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)
On 4/27/2024 at 2:40 AM, tuanphan said:

What is password?

image.png.ed9551df39e6ad16216d316aa2efa2ba.png

Ah! I'm so sorry, I missed the notification. I didn't realize the password was on either. It's Muga25. I also changed the urls. It's now: https://www.mugacarpentry.com/portfolio. I was able to get the links to work correctly (I think), but I still can't figure out the color transition. Thanks!

Edited by Quadrant
Link to comment
On 5/3/2024 at 12:42 PM, Quadrant said:

Ah! I'm so sorry, I missed the notification. I didn't realize the password was on either. It's Muga25. I also changed the urls. It's now: https://www.mugacarpentry.com/portfolio. I was able to get the links to work correctly (I think), but I still can't figure out the color transition. Thanks!

You mean these text?

image.thumb.png.74f97ea3fb920cdca681a17431eaadc6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/5/2024 at 4:52 AM, tuanphan said:

You mean these text?

image.thumb.png.74f97ea3fb920cdca681a17431eaadc6.png

yes! that's it!

also, i added code to make the entire block clickable, and it works, but it the backend of squarespace, I get an error message if i click on the picture. is that normal?

Link to comment
On 5/7/2024 at 7:28 AM, Quadrant said:

yes! that's it!

also, i added code to make the entire block clickable, and it works, but it the backend of squarespace, I get an error message if i click on the picture. is that normal?

To change color to white on hover, use this CSS code

.fe-block-yui_3_17_2_1_1713915846721_5545:hover *, .fe-block-30d0b584b8e65003d366:hover *, .fe-block-712a1d835251f6c1ef7f:hover * {
    color: #fff !important;
}

Can you take a screenshot of error message?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
20 hours ago, tuanphan said:

Can you take a screenshot of error message?

Thank you! 

And it's not an error message, it just shows the attached, saying it can't connect. But it's fine on the actual site. I only have this happen when I click the link on the backend in my pages.

Not sure if it's code related? This is what I'm using:

 

<style>
#block-yui_3_17_2_1_1713915846721_5545 {
   cursor: pointer;
   pointer-events: auto;
}
#block-yui_3_17_2_1_1713915846721_5545 p {
   pointer-events: none;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
   var block = document.getElementById("block-yui_3_17_2_1_1713915846721_5545");
   block.onclick = function() {
       window.location.href = "https://www.mugacarpentry.com/muga-gallery";
   }
});
</script>


<style>
#block-30d0b584b8e65003d366 {
   cursor: pointer;
   pointer-events: auto;
}
#block-30d0b584b8e65003d366 p {
   pointer-events: none;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
   var block = document.getElementById("block-30d0b584b8e65003d366");
   block.onclick = function() {
       window.location.href = "https://www.mugacarpentry.com/early-work";
   }
});
</script>


<style>
#block-712a1d835251f6c1ef7f {
   cursor: pointer;
   pointer-events: auto;
}
#block-712a1d835251f6c1ef7f p {
   pointer-events: none;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
   var block = document.getElementById("block-712a1d835251f6c1ef7f");
   block.onclick = function() {
       window.location.href = "https://www.mugacarpentry.com/current-projects";
   }
});
</script>

Screenshot 2024-05-10 at 12.35.57 AM.png

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.