0

我正在为自己设计一个 Tumblr 主题，但我偶然发现了一些我没有足够的知识来整理的东西，我希望你能帮助我。

基本上我已经做到了，所以当您将鼠标悬停在链接上时，它会将链接的背景更改为灰色。带有链接的图像会出现问题，它们也会得到一个小的背景。检查图片以了解我的意思。

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

图像属于.haloCSS。我真的很感谢任何 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;
   }
4

1 回答 1

1

我会补充

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

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

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

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

于 2013-03-05T04:07:39.060 回答