0

基本的に、6つのテキストリンクを含む6つの写真があります

私は写真にcssをホバリングしました（カラーバージョン - >ホバー時 - >白黒バージョン）

およびテキスト リンク (黒のフォント -> ホバー時 -> 赤のフォント)

リンクにカーソルを合わせているとき - 画像がホバー バージョン (B&W) になっていますが、それは問題ありませんが、画像にカーソルを合わせているときはこの方向にのみ機能し、反対方向に機能します - テキスト リンクは同じままです (黒いフォント)。

それが私の質問です。この 2 つの要素 (テキスト リンクと画像) をどのように接続するのでしょうか?

ここに私のコードがあります:

HTML

<ul class="menu">     
li class="element_1"><a href="./first_link.html"></a>
<a href="./first_link.html" class="text">Text of the<br>First<br>Link</a></li>

[rest of the elements list]
</ul>

CSS

 ul.menu element_1{
 width:130px;
 margin-left:20px;
  height:130px;
 display: block; background: url(img/menu_1.jpg) top center no-repeat;;
}


ul.menu li.element_1:hover{
 width:130px;
 margin-left:20px;

 display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;;
4

2 に答える 2

0

リンクの色を変更するためのCSSが表示されません。私はあなたがそれをするためにブラウザを頼りにしていると思いますか？

これを修正するには、既存のCSSにルールを追加します。

ul.menu li.element_1:hover{
 color: red;

 width:130px;
 margin-left:20px;

 display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;
}

別の方法は、画像とテキストを単一の要素内に配置することです。この場合、ブラウザは要素全体に自動リンクハイライトを適用します。

于 2013-03-20T16:55:52.717 に答える
0

特に背景画像を使用しているので、HTML を再構成して単一のアンカーのみを使用することをお勧めします。次に、ホバリングすると、画像とフォントの色の両方の変更を適用できます。

簡単な例としてjsFiddleを見てください*。新しい CSS は次のとおりです。

.element_1 a {
    width:130px;
    margin-left:20px;
    height:130px;
    display: block; 
    background: url('http://placekitten.com/200/300') top center no-repeat;
    color: red;
}

.element_1 a:hover{
    background-image: url('http://placekitten.com/300/300');
    color: green;
}

状態を定義するとき:hoverは、すべてを再記述するのではなく、変化しているもののみを指定する必要があります。

* HTML/CSS を整理する必要があることに注意してください。クラス セレクターの が抜けて.いて、複数のセミコロンがありました。コードが検証され、これらの単純な間違いがないことを確認してください。これらの間違いは本当の問題を隠してしまうからです。

于 2013-03-20T16:53:42.240 に答える