jQuery for Designers Beginner's Guide

Time for action – making it fancy

1. Let's start with a little CSS to change the cursor to a pointer and add a little hover effect to our questions to make it obvious to site visitors that the questions are clickable. Open up the styles.css file that's inside the styles folder and add this bit of CSS:

   dt       {
          color: #268bd2;
          font-weight: bold;
          cursor: pointer;
          margin: 0 0 1em 0;
          }
   
   dt:hover       {
          color: #2aa198;
          }

   That definitely helps to communicate to the site visitor that the questions are clickable.

   
2. When we click a question to see the answer, the change isn't communicated to the site visitor very well – the jump in the page is a little disconcerting and it ...