0

I have a span tag that has a background image on it then inside it I have an a tag with text link. The span has the background image set to the right of the text link. I want when you rollover the a tag for it to also cover the span background image in its hover state also. I tried something like this but still not working.

        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>
4

3 回答 3

0

换一种方式；用一个大标签包裹你的跨度<a>，并将链接文本写在<span>. 例如：

<a href = "#">
    <span style = "background-image: url(your_image.png);">
        Download PDF
    </span>
</a>
于 2012-08-14T19:35:58.503 回答
0

在与孩子交互时，您不能在 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)

于 2012-08-14T19:36:52.397 回答
0

我可能会尝试将背景分配给链接和跨度。然后你可以让悬停状态处理背景转换。

<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/

于 2012-08-14T19:56:08.600 回答