Question

我正在为自己制作一个Tumblr主题，我偶然发现了一些我没有足够的知识来解决的问题，我希望你能够帮助我。

基本上我是这样做的，当你将鼠标悬停在链接上时，它会将链接的背景更改为灰色。问题出现在有链接的图像上，它们也会得到一个小背景。检查图片，看看我的意思。

图片属于CSS中的.halo。我非常感谢任何来这里帮助我的CSS大师，这是我正在使用的CSS。

   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;
   }

Answer 1

我会添加

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

应该这样做。您的代码现在的问题是它没有指定将鼠标悬停在图片链接上时背景应该是什么，因此它会回退到您使用a:hover指定的内容。

通过添加这个额外的部分，您告诉浏览器如何在图像链接悬停时为其设置样式，以便它不会回退到您使用a:hover选择器定义的内容。

修改：澄清一下，您指定的a适用于所有链接，包括图片链接，因为它们都嵌入在<a>标记中。

干扰图像链接的CSS链接类型

1 个答案: