Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Although we aren't going to do anything in this movie that we haven't already done in one form or another, stick with me, because in this movie we're going to tie everything that we've learned about styling links together to explore making CSS-based rollovers. We'll focus on a background image based rollover, but the same techniques that we're going to use here would also work with background colors or foreground colors. The ability to create CSS-based rollovers is based off of the use of what we call pseudo selectors. There are many different pseudo selectors, but the link, visited, hover, and active pseudo selectors allow us to respond to user interaction on our links.
In the past we've needed to be very careful in how we added these pseudo-selectors as browsers were very inconsistent in how they handled visited links. Now the browsers have more or less standardized how visited links are handled we can use the hover pseudo selector to control user interaction on links without worrying about the negative effects of visited links. So I have the index file open from the 08_07 folder and you may notice that I'm already in Split Screen view and that's because before we start talking about creating rollovers I want to discuss very briefly the styling of links themselves.
You may have noticed that one of the most common techniques for styling links is to remove the default underline that links have. The easiest way to do that is just in a generic link selector as we have here with the a tag, you just set text-decoration to none. That is all there is to that. It's incredibly simple thing to do. I'm going to switch back to Design view and I'm going to turn Live view on, and I'm just going to scroll down a little bit, because what I'm interested in styling are these guys right here. I want to do a CSS based rollover for these particular links.
Now I'm going to go over to the CSS Styles panel and I'm a big believer in keeping things as simple as you can. So what I'm going to do is I'm going to select the existing a selector which is up towards the top of my styles and I'm going to create a brand-new CSS rule, and of course the reason that we're focusing on this is so that it'll create the rule just underneath it. That's going to help me keep things organized. So I'm going to do New CSS Rule. Now most the time you're going to pick a selector based on what you're trying to style on the page. In this case, I really want to do a very generic selector.
So even though we're going to be styling a tag; in this case the anchor tag, it's actually more appropriate for us to choose Compound, because Dreamweaver has a list of all those pseudo selectors right there built-in to the selector name, which is very nice. I'm just going to use a:hover and that's going to control the styling of this link anytime the mouse hovers over a generic link. I'm going to style that in main.css and I'm going to go ahead and click OK. Now what I want to do here is I want to use that orange color so every time somebody hovers over one of our links I want the color of the text itself to change to orange.
So what I'm going to do is I'm going to go right here into our Type category and for Color I'm going to type in rgb and then in parentheses (251,174,44). I'm going to close my parentheses and click OK. Now as I mouse around my page now all of my links are turning orange, which is great. That's actually what I need everywhere else including up here in the menu.
So that's a nice global setting. I can turn that on to all of my links at the same time and everybody goes ahead and gets that. However, it's not appropriate for everything. That orange looks kind of weird. It has a nice contrast and you can read it on the blue. However, what about one of these guys? This has a link on it, and now when I hover over that, of course, it looks like it's going away because the orange blends in with it. So since we have so many of these different info boxes that have links in them some of them, the orange looks okay in, some of them the orange just kind of goes away.
So I want to control that by not only changing the color of the links when I hover over them, but replacing that color with a background image that's still going to give me a nice hover effect. So in order to do that I'm going to scroll up through my styles and what I'm looking for is right there, section.info a:hover. So essentially it's saying when any link is hovered inside of a section with the class of info, let's apply that. So it's going to apply it to every single one of these little pods.
So I'm going to go ahead and select that rule and double-click it so I can edit that. Now the first thing I'm going to do is change the color. I want to keep color white. So even though the default color of the links is white I'm going to have this background image that shows up. So that's okay, and in this way I don't have to worry about contrasting with all the multiple colors that are inside these section boxes. The next thing I'm going to do is switch over to the Background category and I'm going to browse for a background image. Inside the 08_07 directory I'm going to go into the images folder and I'm just going to scroll through until I find that diagonal pattern.
Then I'm going to go ahead and click OK. Now I do want this to repeat, so I'm not going to change any of these settings here. I'm going to go ahead and click OK. As soon as I do that I can do a Save All and then just having Live View on is fine. Now when I come over here to find out more, notice when I hover over that I get that diagonal background image and it gives a nice little hover effect. It's not as obvious in some of the other info palettes; you can see it sort of there, it's very subtle in that one whereas in other ones it's quite obvious. But it's kind of a nice little effect. It's very subtle, but it still gives the user feedback on the fact that they are hovering over that particular element.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.