-2

HTMLとCSSに関して小さな問題があります。私のHTMLマークアップは次のようなものです

<div class="link-wrap">
    <h4><a href=""><span class="link-text">Link 1</span><span class="link-image">Link 2</span></a></h4>
</div>

私のCSSはこんな感じです

<style>
.link-wrap {
  padding: 0;
  margin: 0;
}
h4 {
  display: block;
}
a {
  text-decoration: none;
}
span.link-text {
  padding: 0;
  margin: 0;
  color: #666;
  text-decoration: none;
}
span.link-text:hover {
  color: #ccc;
}
span.link-image {
  color: #F00;
}
span.link-image:hover {
  color: #666;
}
div.link-wrap span.link-text span.link-image:hover {
  text-decoration: underline;
}
</style>

これで、私のマークアップに従って、両方<span>が2つの異なるリンクに変換され、ホバー状態が異なることがわかります。ここで、2つのリンクを1つに変換する必要があります。例のように、最初のスパンをホバーすると、2番目のスパンのホバー状態も変更されます。

更新 マークアップを変更できないと言って申し訳ありません。マークアップは変更されません。

4

2 に答える 2

2

ホバーは、スパンではなく要素に適用されます。にカーソルを合わせたときに両方のスパンを同じタイマーで変更するには、次を使用します。

a:hover span.class {}

あなたが持っている構造とは対照的に。

于 2012-10-12T16:16:17.503 に答える
1

あなたのhtmlマークアップとcssを研究することによって、ホバーのcssはspan要素では機能せず、aで機能することを伝えたいと思います。両方のスパンにホバー状態を使用する場合は、

 div.link-wrap a:hover span.class-name { }

それがあなたのために働くことを願っています。

于 2012-10-13T03:49:06.873 に答える