1

私は今CSSを学び、実験しています。メニュー ボタンを含む div があり、そのうちの 1 つをホバーするときに他のボタンのテキストを変更したいと考えています。HTML は次のとおりです。

<div id="menu">
  <h3 id="test">About me</h3>
  <h3 id="test2">Education</h3>
  <h3>Projects</h3>
  <h3>Photos</h3>
  <h3>Contact</h3>
</div>

CSSでできることがわかりました:

#test:hover+#test2 {
    opacity:0.8;
} 

次に、#test をホバーすると、#test2 の透明度が変化します。それはとてもクールです。しかし、#test2 テキストを次のように変更するにはどうすればよいですか。

 #text2=<h3>Different text</h3>

挨拶します。

編集:それは良いです。しかし、なぜこれが機能しないのですか?ホバリング時に #test2 が 'Get' に変更されるだけです...

<div id="menu">
  <h3 id="test">About me</h3>
  <h3 id="test2"></h3>
  <h3 id="test3"></h3>
  <h3 id="test4"></h3>
  <h3 id="test5"></h3>
</div>

#test2:before{
  content:'Education';
}
#test3:before{
  content:'Projects';
}
#test4:before{
  content:'Photos';
}
#test5:before{
  content:'Contact';
}
#test:hover+#test2:before {
  content:'Get';
}
#test:hover+#test3:before {
  content:'to';
}
#test:hover+#test4:before {
  content:'know';
}
#test:hover+#test5:before {
  content:'me';
4

3 に答える 3

1

CSSでコンテンツを変更することはできません...

CSSはスタイリングのためだけのものです..

:afterand :before(疑似要素content )を使用してこのようなものをシミュレートできますが、それはコンテンツに実際にアクセスできないことを意味します ( end 元のコンテンツも CSS で定義する必要があります)。

<div id="menu">
  <h3 id="test">About me</h3>
  <h3 id="test2"></h3>
  <h3>Projects</h3>
  <h3>Photos</h3>
  <h3>Contact</h3>
</div>

#test2:before{
    content:'Education';
}
#test:hover + #test2:before {
    opacity:0.8;
    content:'No Education';
} 

http://jsfiddle.net/gaby/65rxA/のデモ


または、両方のコンテンツを異なるタグで提供し、必要なものを表示/非表示にすることもできます..

<div id="menu">
     <h3 id="test">About me</h3>
     <h3 id="test2">
         <span class="original">Education</span>
         <span class="alternate">Alternate</span>
     </h3>
     <h3>Projects</h3>
     <h3>Photos</h3>
     <h3>Contact</h3>
</div>

#test:hover + #test2 {
    opacity:0.8;
}
#test:hover + #test2 > .original, .alternate {
    display:none;
}
#test:hover + #test2 > .alternate {
    display:inline;
}

http://jsfiddle.net/gaby/65rxA/2/のデモ

于 2013-06-15T13:34:22.137 に答える
0

疑似要素を使用できます:

.bar::after {
    content: "Old Text";
}

.foo:hover + .bar::after {
    content: "New Text";
}

ただし、アクセシビリティに関心がある場合は、良いアプローチではありません。ホバーされた要素に隣接するのではなく、一般的な兄弟である要素をターゲットにしたいようです。その場合は、代わりに~コンビネータを使用する必要があります。

#test:hover ~ #test2::before { content: "Get";  }
#test:hover ~ #test3::before { content: "To";   }
#test:hover ~ #test4::before { content: "Know"; }
#test:hover ~ #test5::before { content: "Me";   }

これが持つ効果をここで見ることができます: http://jsfiddle.net/QwFgp/

于 2013-06-15T13:33:45.653 に答える