Question

我有一个span标签，上面有背景图片，然后在里面我有一个带文字链接的标签。跨度的背景图像设置在文本链接的右侧。我希望当你翻转它的标签时也能覆盖悬停状态下的跨度背景图像。我尝试过类似的东西，但仍然无法正常工作。

        span a:first-child + span a:hover{
            cursor: pointer;
        }

Markup html

        <div class="wrapper">
            <span>Study Bill</span>
            <span><a href="#">Download PDF</a></span>
        </div>

Answer 1

反过来做;使用一个大的<a>标记包裹您的范围，并在<span>内写下链接文本。例如：

<a href = "#">
    <span style = "background-image: url(your_image.png);">
        Download PDF
    </span>
</a>

Answer 2

在与孩子互动时，你无法改变CSS中父母的属性 - 它只能以一种方式工作。但是你可以这样做 - http://jsfiddle.net/uH2XP/

<a href="#">some link text</a>

<style>
a:after {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background: green;
}

a:hover:after {
    background: orange;
}
</style>

只需将content: ''替换为content: url(path/to/your/image.png)

即可

Answer 3

我可能会尝试将背景分配给链接和范围。然后，您可以让悬停状态处理背景过渡。

<style>
     div.wrapper a, div.wrapper span{background:#f00;}
     div.wrapper a:hover{background:#0f0;}
</style>

<div class="wrapper">
     <span>Study Bill</span>
     <a href="#">Download PDF</a>
</div>

http://jsfiddle.net/sdowswell/sz6fq/

如何使标记悬停也适用于包裹的跨度

3 个答案: