Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
oli_drone

using multiple CSS blocks -

Question

hello - new to squarespace and haven't coded since like 2003 and this is very hard for me to put into words, so please bear with me.

my goal is to add css code to create a hover state with images. very simple. when i create the 1st block everything works fine. i add the 2nd css block using the same code structure, update the two image urls for hover states and save. 
every time i add a new block all the previous blocks change to the newest one created even though they are all point to their own .png urls.

this is the code i'm using: https://www.tutorialrepublic.com/codelab.php?topic=faq&file=changing-image-on-hover-with-css

any help would be greatly appreciated!

 

 

 

Screen Shot 2020-03-04 at 2.38.49 PM.png

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0
Posted (edited)
7 hours ago, tuanphan said:

Can you share link to your site? to check your code

hello - im working on this in staging, but the site is dronebase.com if thats helpful.

heres the code im working with:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
    .card {
        width: 432px;
        height: 102px;
        background: url("https://images.squarespace-cdn.com/content/5afa06f5506fbea240a330a7/1583356423440-GJPLOGXJ6HM4O5CWHAEY/ins-off.png?content-type=image%2Fpng") no-repeat;
        margin: 0px;
    }
    .card:hover {
        background: url("https://images.squarespace-cdn.com/content/5afa06f5506fbea240a330a7/1583356585413-YAP8FGEZZVFRDNU1MV6F/ins-on.png?content-type=image%2Fpng") no-repeat;
    }
</style>
</head>
<body>
    <div class="card"></div>
</body>
</html>

 

do i need to assign each block with its div class?

<div class="card" id="yui_3_17_2_1_1583444366596_51285"></div>

 

 

Edited by oli_drone

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...