0

初心者の質問で申し訳ありませんが、この問題に丸一日費やしたことをあきらめようとしています... このフォーラムを数時間検索しましたが、まだ機能しません。

次の問題に対するCSSソリューションを手伝ってくれる人はいますか?

基本的に、画像の背景とテキスト リンクを含むテーブル セルがあります。この表のセルにマウスを合わせると、画像とリンクの色を同時に変更する必要があります。私の面倒なコードは次のようになります。

<table>
  <tr>
    <td width="160" height="36" align="center" valign="middle" class="menuitem1">
       <a href="http://www.samplesite.com">About us</a>
    </td>
  </tr>
</table>`

次に、CSSファイルでこれをすべて試しました：

.menuitem1 {
   border-right-width: 1px;
   border-right-style: solid;   
   border-right-color: #000;
   background-image: url("images/sample.png");
   background-repeat: no-repeat;
   background-position: left;
   padding-left: 17px;
}
.menuitem1 a:link{
   display: block;
   text-decoration: none;
   color: #fff;
}
.menuitem1 a:visited {
   text-decoration: none;
   color: #fff;
}
.menuitem1:hover {
   text-decoration: none;
   background-image: url("images/sample2.png");
   background-repeat: no-repeat;
   background-position: left;
   color: #000;
}
.menuitem1 a:hover {
   text-decoration: none;
   color: #000;
}
.menuitem1 a:active{
   color: #000;
}

block問題は、テキスト リンクが属性に従っていないことです。そのため、セルの残りの部分ではなく、マウスがその上にあるときにのみテキストの色が変わります。ブロックにない左側の静止葉( ) に追加width: 100%します。そして、それは効果がなく、px で固定された高さは、テキストを変更する可能性なしに、テキストを上に垂直に揃えます。.menuitem1 a17pxpadding-leftheight: 100%

セルにハイパーリンクがなく、そこにテキストだけがある場合、この単純なコードですべてが夢のように機能するのはおかしいです。

.menuitem1:hover {
   text-decoration: none;
   background-image: url("images/sample2.png");
   background-repeat: no-repeat;
   background-position: left;
   color: #000;
}

リンクを追加した後に発生する問題に、そのような簡単な解決策はありませんか?

事前にどうもありがとうございました。

4

1 に答える 1

1

多くの初心者のJavaScriptプログラマーが最初に気付いていないのは、セレクターのリストを新しいセレクターにつなげることができるということです。したがって、背景画像を変更するには、次のように入力します。

.menuitem1:hover {
    background-image: url("images/sample2.png");
    background-repeat: no-repeat;
    background-position: left;

ただし、a要素を選択するには、次の形式を使用する必要があります。

.menuitem1:hover a {
    color: #000;
    text-decoration: none;
    ...
}

お役に立てれば！

于 2013-03-10T21:52:23.970 に答える