jQuery for Designers Beginner's Guide

Time for action – adding some final touches

1. Let's start with some simple CSS to add a small arrow icon to the left side of our questions. Head back into style.css and modify the styles a bit to add an arrow icon or an icon of your choosing. You can place the icon you choose inside your images folder:

   dt       {
          color: #268bd2;
          font-weight: bold;
          cursor: pointer;
          margin: 0 0 1em 0;
          padding: 0 0 0 20px;
          background: url(../images/arrow.png) 0 0 no-repeat;
          line-height: 16px;
          }
   
   dt:hover       {
          color: #2aa198;
          background-position: 0 -32px;
          }

   I'm using an image sprite for the arrows. As I'm changing the color of my questions from blue to green when the mouse hovers over the questions, I've included both the blue and green arrows in my sprite and am using a bit of ...