0

私は自分のためにTumblrのテーマに取り組んでいますが、解決するのに十分な知識がないことに気づきました。あなたが私を助けてくれることを望んでいました。

基本的には、リンクにカーソルを合わせると、リンクの背景が灰色に変わるように作成しました。リンクのある画像で問題が発生し、背景も小さくなります。写真をチェックして、私が何を意味するかを確認してください。

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

.halo画像はCSSに分類されます。私を助けてくれる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 に答える