CODEWITHSUNDEEP
htmlcss
Jeffery McKeel
Jeffery McKeel

Reputation: 1

CSS link types interfering with image links

I'm working on an a Tumblr theme for myself and I've stumbled upon something that I just don't have enough knowledge to sort out and I was hoping you'd be able to help me out.

Basically I've made it so when you hover on a link, it changes the background of the link to grey. The problem arises with images that have links, they too will get a small background. Check the picture to see what I mean.

http://i.imgur.com/8VnxFwB.png

Images fall under .halo in the CSS. I'd really appreciate any CSS guru coming in here to assist me, here's the CSS I'm using.

   body {
      font-family: monaco, "courier new", mono;
      background: {color:Background};
      color: {color:BodyText};
      font-size: 10pt;
   }
   p, li {
      margin-bottom: 10pt;
   }
   h2 {
      font-size: 110%;
      text-transform: uppercase;
      margin-bottom: 10pt;
   }
   h3 {
      font-size: 100%;
      margin-bottom: 10pt;
   }
   blockquote, .who {
      margin-left: 20pt;
      margin-bottom: 10pt;
   }
   a {
      color: {color:BodyText};
   }
   a:link, a:visited {
      text-decoration: none;
   }
   a:hover {
      background: {color:HoverBackground};
      text-decoration: none;
   }
   ul, ol {
      margin-left: 30pt;
      margin-bottom: 10pt;
   }
   ul li {
      list-style-type: disc;
   }
   #stext {
      border: 0;
      color: {color:BodyText};
      background: {color:HoverBackground};
      padding: 2px 5px;
      font-size: 10pt;
   }
   #title
   {
      text-transform: uppercase;
      letter-spacing: 10pt;
      text-align: center;
      font-size: 110%;
   }
   #title a:hover {
      text-decoration: none;
      /*color: #FF6600;*/
   }
   #desc {
      margin: 0 20pt 10pt 20pt;
   }
   #posts {
      width: 640px;
      margin: 0 auto 0 auto;
      text-align: left;
   }
   #paging {
      text-align: center;
   }
   .date, .perm, #rss {
      text-align: right;
   }
   .chat {
      margin-bottom: 10pt;
   }
   .label {
      white-space: no-wrap;
      padding-right: 10pt;
      vertical-align: top;
   }
   .line {
      padding-bottom: 10pt;
   }
   .caption {
      margin-bottom: 10pt;
   }
   .halo {
      padding: 5px;
      border: 1px solid {color:BodyText};
   }
   .fleft {
      float: left; 
      width: 200px; 
      text-align: left;
   }
   .fright {
      float: right; 
      width: 200px; 
      text-align: right;
   }
   ol.notes li.note img.avatar {
      display: none;
   }

Upvotes: 0

Views: 129

Answers (1)

Albert Xing
Albert Xing

Reputation: 5788

I would add

a.halo:hover {
    background: #FFF; /* Or any color that fits in, e.g. transparent maybe? */
}

That should do it. The problem with your code right now is that it doesn't specify what the background should be when you hover over an image link, so it falls back to what you specified with a:hover.

By adding this extra piece, you are telling the browser how to style an image link when it is hovered over, so that it doesn't fall back to what you defined with the a:hover selector.

Edit: to clarify, the a you specify applies to all links, including image links, because they all are embedded in an <a> tag.

Upvotes: 1

Related Questions