Question

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

更新很抱歉，我无法更改我的标记。我的标记将保持不变。

Answer 1

悬停适用于a元素，而不适用于span。当您将鼠标悬停在a上时，为了使两个跨度在同一个计时器上发生变化，请使用

a:hover span.class {}

与您的结构相反。

Answer 2

通过研究你的html标记和css我想告诉你，悬停的css对span元素不起作用，它适用于a。如果要对跨度使用悬停状态，请使用

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

希望它对你有用。

在html中将两个链接转换为一个

2 个答案: