Title: Hover/rollover color change
Last modified: August 19, 2016

---

# Hover/rollover color change

 *  Resolved [wilsonvision](https://wordpress.org/support/users/wilsonvision/)
 * (@wilsonvision)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/hoverrollover-color-change/)
 * Hello:
 * I am trying to change the color of my top nav bar. My main concern is changing
   the hover color so that it rolls over in red. I’ve tried to replace the current
   hover color (blue) with a red. I’ve ravaged the code and replaced all link colors
   but can’t seem to get it to change. I even went into the images folder, and re-
   made all the .gif and .jpg images into red if I suspected they may be used for
   a rollover.
    If anybody can make a suggestion it would be greatly appreciated.
 * Here’s the link:
 * [http://www.crdindustrialsales.com](http://www.crdindustrialsales.com)
 *     ```
       /*
       Theme Name: Blog Design Studio NewBlue
       Theme URI:
       Description: Two column theme.
       Version: 1.0
       Author: Blog Design Studio
       Author URI: http://blogdesignstudio.com/
       Tags: Blue, White, Right Sidebar, two columns, fixed width, valid css, valid XHTML
   
       	Valid XHTML 1.0 Transitional
   
       */
   
       * {
       margin: 0;
       padding: 0;
       }
       body {
       color: #444;
       background:#333333;
       font-family: Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;
       font-size: 75%;
       line-height: 1.6;
       }
       h1, h2, h3, h4, h5, h6 {
       font-family: Georgia, "Times New Roman", Times, serif;
       font-weight: normal;
       color:#6B6B6B;
       }
       h1 {
       font-size: 2.7em;
       }
       h1 a { display: block; height: 40px; color: #ff3333; text-decoration: none; }
       h1 a:hover, h1 a:active { color: #ff3333!important; }
       h2 {
       font-size: 2.1em;
       line-height: 1.1em;
       margin-bottom: 0.2em;
       }
       h3 {
       font-size: 1.7em;
       line-height: 1;
       margin-bottom: 0.7em;
       }
       h4 {
       font-size: 1.4em;
       line-height: 1.25;
       margin-bottom: 0.25em;
       }
       h5 {
       font-size: 1.2em;
       font-weight: 700;
       margin-bottom: 1.5em;
       }
       h6 {
       font-size: 1em;
       font-weight: 700;
       }
       p {
       font-size: 1.1em;
       margin: 0 0 10px 0;
       }
       blockquote {
       background: url(images/quote.png) no-repeat;
       color: #ff3333;
       margin: 10px;
       padding-left: 25px;
       }
       em {
       font-style: italic;
       }
       strong {
       font-weight: 700;
       }
       pre, code {
       font-family: "Courier New", Courier, Monospace;
       line-height: 1.5;
       }
       pre {
       border-top: 1px solid #ccc;
       white-space: pre;
       overflow: auto;
       margin: 0 15px;
       padding: 10px 15px;
       max-height: 300px;
       }
       img {
       border: none;
       }
   
       a, a:visited {
       color: #ff3333!important;
       text-decoration: underline;
       outline: none;
       }
       a:focus, a:hover {
       color: #ff3333;
       text-decoration: none;
       }
   
       ul, ol {
       margin: 0 2.5em 1.5em;
       font-size:1em;
       }
       ul li, ol li {
       margin-bottom: 0.5em;
       }
       ul {
       list-style-type: disc;
       }
       ol {
       list-style-type: decimal;
       }
       .clear {
       float:none;
       clear: both;
       }
       .aligncenter,
       div.aligncenter {
          display: block;
          margin-left: auto;
          margin-right: auto;
       }
       .alignleft {
       float: left;
       }
       .alignright {
       float: right;
       }
       .wp-caption {
          border: 1px solid #ddd;
          text-align: center;
          background-color: #f3f3f3;
          padding-top: 4px;
          margin: 10px;
       }
   
       .wp-caption img {
          margin: 0;
          padding: 0;
          border: 0 none;
       }
   
       .wp-caption p.wp-caption-text {
          font-size: 11px;
          line-height: 17px;
          padding: 0 4px 5px;
          margin: 0;
       }
   
       img.alignleft {
       margin:5px 10px 10px 0;
       }
       img.alignright {
       margin:5px 0 10px 10px;
       }
       hr {
       background: #ff3333;
       color: #E6E6D2;
       clear: both;
       float: none;
       width: 100%;
       height: .1em;
       margin: 0 0 1.4em;
       border: none;
       }
       hr.space {
       height: 4em;
       }
   
       .clearer {
       clear:both;
       }
   
       /************************* HOLDERS ********************************/
       .container {
       width: 998px;
       margin: 0 auto;
       }
   
       .main {
       margin-top:10px;
       }
   
       .container2 {
       width: 100%;
       margin: 0 auto;
       text-align:left;
       background:url(images/content_pat.gif) center top repeat-y;
       }
   
       /************************* HEADER ********************************/
       #header {
       width: 998px;
       margin:0px auto;
       height:150px;
       }
       #header .container {
       width: 998px;
       height:130px;
       background:#CCCCCC url(images/logo1.png) left top repeat-x;
       }
       #headline {
       float:left;
       display:block;
       margin:10px 0 0 20px;
       font-size:16px;
       color:white;
       width:700px;
       }
       #headline h1 {
       font-size:40px;
       line-height:40px;
       margin:0 0 6px 0;
       color:#C6E4E8;
       font-weight:normal;
       letter-spacing:-1px;
       }
   
       .desc_l {
       background:url(images/desc_l.gif);
       width:10px;
       height:27px;
       float:left;
       }
       .desc {
       background:url(images/desc_pat.gif);
       height:27px;
       float:left;
       font-size:14px;
       line-height:25px;
       font-weight:normal;
       }
       .desc_r {
       background:url(images/desc_r.gif);
       width:10px;
       height:27px;
       float:left;
       }
   
       /************************* PAGES MENU START ********************************/
       .topline {
       }
       ul.menu {
       width:750px;
       float:left;
       list-style-type: none;
       margin: 0px auto;
       padding:0 0 0 20px;
       margin-top:130px;
       font-weight:normal;
       height:48px;
       }
       ul.menu li.page_item {
       float: left;
       display: inline;
       font-size: 17px;
       margin:0;
       padding:0;
       }
       ul.menu li.page_item a {
       color:#ff3333!important;
       display: block;
       float:left;
       text-decoration: none;
       padding:10px 15px 12px 15px;
       margin-right:1px;
       }
       ul.menu li.page_item a:hover {
       color: #ff3333!important;
       text-decoration:none;
       background:url(images/menu_hover.gif) left top repeat-x;
       }
       ul.menu li.current_page_item a {
       color: #ff3333!important;
       text-decoration:none;
       background:url(images/menu_hover.gif) left top repeat-x;
       }
       ul.menu li.current_page_item a:hover {
       color: #ff3333!important;
       text-decoration:none;
       background:url(images/menu_hover.gif) left top repeat-x;
       }
       /************************* PAGES MENU END ********************************/
   
       /************************* SUBSCRIBE START ********************************/
       .subs {
       display:block;
       float:right;
       width:180px;
       }
       .subs a {
       margin:30px 22px 0 0;
       padding:0 0 0 30px;
       height:30px;
       line-height:26px;
       display:block;
       float:right;
       background:url(images/rss.gif) left top no-repeat;
       color:#FFCC00!important;
       font-size:15px;
       }
   
       /************************* SUBSCRIBE END ********************************/
   
       /* Search */
       #searchform {
       padding:0;
       margin:25px 20px 0 0;
       display:block;
       float:right;
       width:200px;
       font-size:15px;
       color:#003e4f;
       }
       input#s {
       width: 190px;
       padding:3px 5px 4px 8px;
       font-family: Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;
       border:none;
       font-size:12px;
       background:url(images/searchfield.gif) no-repeat;
       color:#437EA7;
       height:17px;
       }
   
       /************************* CONTENT PACKER ********************************/
   
       #leftcolumn, #rightcolumn {
       margin:0;
       }
   
       #leftcolumn {
       float: left;
       width: 680px;
       padding:0;
       }
   
       #rightcolumn {
       float: right;
       width: 280px;
       margin:0 18px 0 0;
       }
   
       /************************* CONTENT START ********************************/
       .title {
       margin:0;
       clear:both;
       }
       .title h2 {
       color: #6B6B6B;
       }
       .title h2 a {
       color: #6B6B6B!important;
       text-decoration: none;
       }
       .title h2 a:hover {
       color: ##ff3333!important;
       text-decoration: none;
       border-bottom:1px dotted #437EA7;
       }
       .date {
       color:#ff3333;
       margin-bottom:10px;
       }
   
       .post {
       padding: 0;
       margin:0 10px 30px 20px;
       clear:both;
       }
       .post p {
       padding:0;
       margin:0;
       }
   
       .postdata {
       padding:0 10px 3px 10px;
       float:left;
       font-size:12px;
       line-height:12px;
       background:#666;
       color:#fff;
       width:630px;
       }
       .postdata_t {
       background:url(images/postdata_t.gif) no-repeat;
       height:5px;
       line-height:5px;
       width:650px;
       margin-top: 10px;
       }
       .postdata_b {
       background:url(images/postdata_b.gif) no-repeat;
       height:5px;
       width:650px;
       margin-bottom: 20px;
       }
       .postdata a, .postdata a:visited {
       color:#fff!important;
       }
       .postcomment {
       padding:0 0 0 25px;
       background:url(images/i_com.gif) left no-repeat;
       float:left;
       }
   
       a.more-link {
       display:block;
       clear:both;
       color:#a6a379;
       margin:10px 0 20px 0;
       width:135px;
       }
       a:hover.more-link {
       color:#ff3333;
       }
       #related h3, h3#comments {
       padding: 8px 0 5px 0;
       border-bottom:1px dotted #999;
       }
   
       .cmd-avatar {
       clear: none;
       display: inline;
       float: right;
       margin: 0px;
       }
       /************************* CONTENT END ********************************/
   
       /************************* SIDEBAR MAINS START ********************************/
       ul.sidebar {
       list-style-type: none;
       margin: 0 0 40px 0;
       padding: 0;
       float:left;
       }
       .sidebar li {
       padding:0;
       margin:0;
       }
       li.widget ul {
       list-style-type: none;
       margin: 0 0 30px 12px;
       padding: 0;
       font-size:15px;
       width:260px;
       }
       .sidebar ul li {
       margin: 5px 0 5px 0;
       }
       .sidebar .children {
       margin: 0 0 10px 10px;
       }
       .sidebar h2 {
       letter-spacing:-1px;
       color:#fff;
       background:url(images/side_h.gif) left top no-repeat;
       font-weight:normal;
       padding:8px 10px 0 15px;
       width:255px;
       }
       .sidebar a {
       color: #000!important;
       padding:4px 5px 6px 18px;
       font-size:12px;
       background:url(images/arrow.gif) left top no-repeat;
       background-position:0 4px;
       text-decoration:none;
       }
       .sidebar a:hover {
       color:#ff3333!important;
       background:url(images/arrow-hover.gif) left top no-repeat;
       background-position:0 4px;
       }
   
       /************************* SIDEBAR MAINS END ********************************/
   
       #tag_cloud {
       display:block;
       margin-bottom:30px;
       float:left;
       clear:both;
       width:100%;
       }
   
       ul#recentcomments {
   
       }
       ul#recentcomments li {
       background:url(images/arrow.gif) left top no-repeat;
       background-position:0 5px;
       padding-left:18px;
       }
       ul#recentcomments li:hover {
       background:url(images/arrow-hover.gif) left top no-repeat;
       background-position:0 5px;
       padding-left:18px;
       }
       ul#recentcomments li a {
       background:none;
       padding-left:0;
       }
       .recentcomments a {
       background:none;
       }
       .recentcomments a:hover {
       background:none;
       }
   
       .comsubline {
       font-size:11px;
       }
       .avtor {
       color:#437EA7;
       }
   
       #tag_cloud a {
       margin-right:5px;
       }
   
       /************************* COMMENTS AREA START ********************************/
   
       .commentlist {
       margin: 0;
       padding:0;
       list-style-type:none;
       }
       .commentlist p {
       padding:5px;
       margin:0;
       }
       .komentar {
       margin:0;
       padding:0;
       }
       .commentlist a {
       border-bottom:1px dotted;
       }
       .commentlist a:hover {
       text-decoration:none;
       border-bottom:none;
       }
       .commentlist .body {
       padding: 0;
       margin:0;
       overflow: hidden;
       float:right;
       width:585px;
       display:block;
       color:#45322f;
       }
       .commentlist .body .body-author {
       padding: 0;
       margin:0;
       overflow: hidden;
       color:#437EA7;
       float:left;
       display:block;
       }
       .commentlist .body p {
       clear:both;
       padding-top:0;
       }
       .commentlist li {
       width: 100%;
       padding: 0 0 5px 0;
       clear:both;
       display:block;
       float:left;
       font-size:11px;
       }
       .commentlist li .top {
       color: #45322f;
       padding: 0;
       margin:0;
       width:580px;
       float:right;
       font-weight: bold;
       }
       .commentlist li .top a {
       color: #437EA7;
       }
       .commentlist li .top span {
       font-size: 0.9em;
       font-weight: 400;
       color:#505e66;
       }
   
       .gravatar {
       height:70px;
       width:60px;
       float:left;
       margin:0;
       }
       img.gravatar {
       margin:0;
       height:60px;
       width:60px;
       padding:2px;
       border:1px solid #ff3333;
       }
       img:hover.gravatar {
       margin:0;
       padding:2px;
       height:60px;
       width:60px;
       border:1px solid #ff3333;
       }
   
       .theform_packer {
       background:url(images/form_pat.gif) repeat-y;
       margin-top:20px;
       }
   
       #respond {
       color:#fff;
       background:url(images/form_t.jpg) no-repeat;
       height:100px;
       width:454px;
       margin:-20px;
       margin-bottom:-60px;
       padding:20px 20px 0 20px;
       }
   
       .theform {
       padding: 20px;
       color:#fff;
       width:454px;
       }
       .form_b {
       background:url(images/form_b.gif) no-repeat;
       height:16px;
       width:494px;
       margin-bottom: 20px;
       }
   
       .theform label {
       font-size: 0.9em;
       vertical-align: middle;
       }
   
       #remember, #forget, #txpCommentHelpLink {
       margin-left: 2em;
       }
   
       #commentform {
       padding:0;
       }
   
       #commentform input:focus {
       border: 1px solid #437EA7;
       background: url(images/formfield_hover.gif) no-repeat;
       width: 170px;
       height:22px;
       border:none;
       }
       #commentform textarea:focus {
       width: 440px;
       height: 140px;
       padding: 5px;
       background: url(images/formtextarea_hover.jpg) no-repeat;
       background-attachment:scroll;
       }
   
       .comment_input {
       vertical-align: middle;
       width: 170px;
       height:22px;
       line-height:16px;
       border: none;
       background: url(images/formfield.gif) no-repeat;
       padding: 3px 5px 0 5px;
       margin:8px 5px 5px 0;
       font-family:Lucida Sans Unicode;
       }
   
       .message_input {
       font-size: 1em;
       width: 440px;
       height: 140px;
       border: none;
       background: url(images/formtextarea.jpg) no-repeat;
       background-attachment:scroll;
       margin-top: 20px;
       margin-bottom:10px;
       padding: 5px;
       font-family:Lucida Sans Unicode;
       }
   
       .commentlist_error {
       color: #c00;
       }
   
       .button {
       background: none;
       width:75px;
       color:white;
       font-weight:bold;
       font-size:14px;
       cursor:pointer;
       border:none;
       font-family: Lucida Sans Unicode, Arial, Helvetica, sans-serif;
       }
       .button:hover {
       color:#ff3333;
       cursor:pointer;
       border:none;
       }
       #commentform .button:focus {
       background: #ff3333;
       color:white;
       cursor:pointer;
       border:none;
       }
       /************************* COMMENTS AREA END ********************************/
   
       /************************* FOOTER START ********************************/
   
       #footer {
       width: 998px;
       height:40px;
       margin:0px auto;
       margin-top:40px;
       padding:10px 0 0 0;
       display: block;
       border-top:3px solid #f7f7f7;
       }
       #footer .container {
       padding:0;
       width:960px;
       }
       .copyright {
       color:#6B6B6B;
       font-size:11px;
       }
       .copyright p {
       font-size:12px;
       float:left;
       margin:6px 5px 0 0;
       }
       a.wordpress {
       display:block;
       float:left;
       width:25px;
       height:25px;
       background:url(images/wordpress.gif) no-repeat;
       color:#ccc!important;
       padding-left:26px;
       line-height:30px;
       text-decoration:none;
       }
       a:hover.wordpress {
       background:url(images/wordpress.gif) no-repeat 0 100%;
       color:#000!important;
       }
       /************************* FOOTER END ********************************/
   
       /*************** SOCIAL LINKS ************************/
       .inside_subpost {
       display:block;
       clear:both;
       margin:30px 23px 30px 20px;
       padding:0;
       }
       .related_rss_icon {
       float:left;
       background:url(images/rss_in.gif) no-repeat;
       width:25px;
       height:26px;
       border-bottom:none;
       }
       .related_rss {
       padding:0;
       margin:0 0 20px 0;
       font-size:18px;
       line-height:17px;
       font-weight:normal;
       border-bottom:none;
       }
       .related_rss a, .related_rss a:visited {
       border-bottom:1px dotted;
       }
       .related_rss a:hover {
       border-bottom:none;
       text-decoration:none;
       }
   
       .social {
       margin:0;
       padding:0;
       float:left;
       margin-right:20px;
       margin-bottom:20px;
       line-height:35px;
       }
   
       /*************** END SOCIAL LINKS ************************/
   
       #calendar_wrap {
       	margin:0px auto;
       	width:210px;
       	margin-bottom:30px;
       	clear:both;
       }
       #calendar_wrap a {
       	padding: 3px 0px;
       	background:none
       }
       #calendar_wrap table { width: 210px; border: solid 1px #ccc; background:#f7f7f7}
       #calendar_wrap caption { padding: 5px 0px; width: 210px; color:#585449;	font-size:14px; font-weight:bold; }
       #calendar_wrap table th { text-align: center; letter-spacing: -1px; padding: 0px; font-size:12px; color:#585449; height:30px; }
       #calendar_wrap table td { text-align: center; border: solid 1px #ccc; padding: 3px; font-size: 12px; color:#585449}
       #calendar_wrap table td a { font-size: 12px; font-weight:bold;}
       #calendar_wrap table td a:hover { color:#ff3333; font-weight:bold; border:none; }
   
       /* Page Navigation  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
   
       .pageNav {
       padding: 5px 0 0 0;
       margin:30px 23px 30px 20px;
       height:30px;
       font-size:15px;
       }
       .pageNav a, .pageNav a:visited { display:block; float:left; text-align:center; line-height:25px; height:25px; width:25px; color:#ff3333!important; text-decoration:none; }
       .pageNav a:hover { text-decoration: none; color:#ff3333; border-bottom:1px dotted #ff3333; }
       .pageNav span { display:block; float:left; text-align:center; line-height:25px; height:25px; width:130px; color:#333;}
       .pageNav .on { display:block; float:left; text-align:center; line-height:25px; height:25px; width:25px; color:#437EA7; }
   
       .dotts {width:25px; text-align:center; display:block; float:left;}
       .pageNav a.lastpage {color: #ff3333;width:35px;}
       .pageNav a:hover.lastpage {color: #ff3333; width:35px;}
   
       #singleNav {
       margin:20px;
       }
       .previous {
       float:left;
       }
       .next {
       float:right;
       }
   
       .list404-table {
       font-size:17px;
       }
       ul.list404, ul.list404 li ul {
       list-style-type:none;
       font-size:14px;
       margin:10px 20px 20px 20px;
       }
       ul.list404 li a {
       background:url(images/arrow.gif) left top no-repeat;
       background-position:0 4px;
       padding-left:20px;
       }
       ul.list404 li a:hover {
       background:url(images/arrow-hover.gif) left top no-repeat;
       background-position:0 4px;
       }
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/hoverrollover-color-change/#post-1361091)
 * have you tried to refresh your browser cache by pressing relaod, or by pressing
   CTRL F5 at the same time?
 *  Thread Starter [wilsonvision](https://wordpress.org/support/users/wilsonvision/)
 * (@wilsonvision)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/hoverrollover-color-change/#post-1361093)
 * The F5 worked. Thanks much!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Hover/rollover color change’ is closed to new replies.

 * 2 replies
 * 2 participants
 * Last reply from: [wilsonvision](https://wordpress.org/support/users/wilsonvision/)
 * Last activity: [16 years, 4 months ago](https://wordpress.org/support/topic/hoverrollover-color-change/#post-1361093)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics