0

背景画像を持つスパンタグがあり、その中にテキストリンクを持つタグがあります。スパンには、テキスト リンクの右側に設定された背景画像があります。タグをロールオーバーしたときに、ホバー状態のスパン背景画像もカバーするようにします。このようなことを試しましたが、まだ機能していません。

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

マークアップ html

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

3 に答える 3

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 に答える
0

別の方法で行います。スパンを 1 つの大きな<a>タグで囲み、リンク テキストを 内に記述します<span>。例えば：

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