Need help? Check out our Support site, then

Twenty Twelve CSS hover color

  1. adventuresincubing

    I'm using custom CSS on a Twenty Twelve theme and have been having difficulty changing the hover color on the sidebar links. I'd prefer to do it by CSS rather than through the color selector on the control panel.

    I had thought the below would have worked:

    .widget-area .widget a:hover {<br /> color: #247cf8 !important;<br /> }

    I had though the "!important" would help override the default CSS (it "saved" other customization that wasn't overriding), but no luck. Any suggestions? Thanks.

    The blog I need help with is

  2. This is happening because the sidebar links have two "!important" CSS declarations targetted at them:

    #main a:hover {<br /> color: #8f8f8f!important;<br /> text-decoration: underline;<br /> }


    .widget-area .widget a:hover {<br /> color: #000!important;<br /> }

    In this case, precedence is being given to the first CSS code snippet. Deleting the "!important" from the "#main a:hover" declaration will solve this.

    Additionally, I noticed your blog is not hosted at There is a separate forum for self-hosted WordPress blogs - please use the support forums for any future problems.

  3. adventuresincubing

    Thank you for the response. I had to narrow the class of the styling for the content links to eliminate the sidebar conflict -- using .entry-content instead of #main:

    .entry-content a:link, #main a:visited {
    	color: #247cf8;
    	text-decoration: none;
    .entry-content a:hover {
    	color: #8f8f8f !important;
    	text-decoration: underline;
    .widget-area .widget a:link, .widget-area .widget a:visited {
    	color: #8f8f8f!important;
    	text-decoration: none;
    	font-size: 14px;
    <p>.widget-area .widget a:hover {
    	color: #247cf8!important;

    The site actually is hosted on It appears that it is not because of the Domain Mapping upgrade (

    Thanks again.

Topic Closed

This topic has been closed to new replies.

About this Topic