Join Chris Converse for an in-depth discussion in this video Creating the dot states, part of Create an Interactive Map with jQuery and Dreamweaver.
- View Offline
Now with our anchor link showing the dot properly, let's come over to our CSS and…create the different states for the states for this dot.…The first one is going to be the hover state.…So let's come over here to our CSS rule, create a new CSS rule.…Let's come down to Compound, a.dot:hover. The colon defines the pseudo-class of hover.…All we are going to set in here under the background settings is we are going to…set the X to 0 and the Y value to -20.…Now some browsers don't support setting only one background position without…setting both, so just to make sure this works in all the browsers. Let's set 0…for X, which is what it by default, and -20 for the Y. So this is going to shift…this vertically 20 pixels, which matches the same 20 pixels that we measured out in Photoshop.…
Let's click OK.…To test this, let's choose File > Save All.…Let's choose File > Preview in Browser.…Now we'll hit reload to make sure the style sheet is reloaded.…And now what's happening when I roll over this is the hover state that we just…
Take a look at the finished web site here.
- Preparing web graphics
- Preparing the base container
- Manipulating links with CSS
- Adding a drop-down menu
- Downloading jQuery and adding interactivity to a project
- Creating city details
- Overriding click events of anchor tags with jQuery
- Enhancing the design with CSS3