0

私のブログは端末画面をシミュレートしているため、通常のテキストは緑色で、マウスを重ねるとリンクは赤色で背景が赤色になります。ブログ全体で等幅フォントを使用し<code>ているため、通常のテキストと区別するために緑色の背景を持つようにスタイル設定されています。同様に、<code>内側<a>には赤い背景があり、マウスを重ねると暗くなります。ライブ バージョンについては、このテスト ページを参照してください。

タグの CSS (完全なファイルはこちら) は次のとおりです。<a>

a {
  color:#CD0000;
  text-decoration:none;
  transition: background-color .6s;
  -webkit-transition: background-color .6s; /* Safari and Chrome */
  -moz-transition: background-color .6s; /* Firefox 4 */
  -o-transition: background-color .6s; /* Opera */
}

a:hover {
  background-color:#440000;
}

<code>タグ内のタグの場合<a>:

a code {
  /* Only apply this to code that is a hyperlink */
  color: #161616;
  background-color: #CD0000;
  border-radius: 5px;
  padding: 0 2px 0px 2px;
  text-decoration:none;
  transition: background-color .6s;
  -webkit-transition: background-color .6s; /* Safari and Chrome */
  -moz-transition: background-color .6s; /* Firefox 4 */
  -o-transition: background-color .6s; /* Opera */
}

a code:hover {
  background-color:#440000;
  border-radius: 5px;
  padding: 0 2px 0px 2px;
}

問題は、 などのリンクにマウスを合わせると、 とタグ<a href='#'><code>long code</code></a>の両方の背景が変換されることです。これを説明する 2 つの画像を次に示します。最初の画像では、要素の上にのみマウスのポインターを置くことができました。2 番目の例では、マウスが要素の上にあります。<code><a><a><code>

マウスが <a> 要素の上にある マウスが <code> 要素の上にある

<code>リンクを通常のリンクとは異なるスタイルにする方法はありますか? 前もって感謝します。

4

1 に答える 1

0

css3セレクター仕様contains()の一部ではなくなったセレクターを探していると思います

これを実現するには、jquery などの js フレームワーク ソリューションか、lesshas() などの動的な css ソリューションを検討する必要があります。

于 2013-09-15T05:01:11.690 に答える