-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>都已转换为两个不同的链接，并且它们具有不同的悬停状态。现在我需要将两个链接转换为一个。就像我将悬停第一个跨度的示例一样，它也应该更改第二个跨度悬停状态。

更新 对不起，我无法更改我的标记。我的标记将保持不变。

4

2 回答 2

2

悬停适用于 a 元素，而不适用于跨度。当您将鼠标悬停在 a 上时，要使两个跨度同时更改，请使用

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 回答