4

アイコンのあるトップメニューがあり、その下にアイコンのテキストがあります。

----------      -----------
|        |      |         |
|  icon  |      |    ?    |
----------      -----------
   Text          Questions

<li class="questions">
    <a href="/questions" id="questions">
    <i class="questions_icon"></i>
    Questions
    </a>
</li>

スプライトを使用すると、:hover でアイコンが変わります。また、:hover でテキストの色が変わります。

ただし、次のことが可能かどうかを知りたいです。

  • テキストがホバーされたときにアイコンを変更する -- そして
  • アイコンをホバーしたときのテキストを変更します。

これはCSSだけで可能ですか？

4

2 に答える 2

1

だから、このようなもの：

.questions:hover i {
    background-image: url(...);
}
.questions:hover {
    color: red;
}
于 2012-05-07T01:01:54.867 に答える
0

デモ (画像なし): http://jsfiddle.net/kFkcV/

.container::after {
  content: "Hello World";
}

.container::before {
  content: /images/icon1.png;
}

.container:hover:after {
  content: "Hover World!";
}

.container:hover:before {
  content: /images/icon2.png;
}

</p>

于 2012-05-07T01:01:01.093 に答える