0

プラスを使用したいリンクがあり、ホバーすると色が変わります。

プラス

しかし、過去1時間で、私はこのトリックを悪意を持って行う方法を理解できません。

ここにリンクがあります、特別なことは何もありません

<a href="detailed.html" class="plus">Find Out More!</a>

私のCSSコード

.block a.plus {
    background: url("images/plus.png") no-repeat 0% 40%;
    background-position: 10px , 0px;
    font-size: 12px;
    padding-left: 25px;
}

.block a.plus:hover{
    /*Just for example*/
    background-position: -15px -1px;
}

そしてまたプラスimgここに画像の説明を入力してください

4

2 に答える 2

1

CSSスプライトは垂直に配置されることがよくあります。これにより、スプライトファイルの特定の行のみを表示できるようになるためです。水平に配置された画像でスプライト手法を使用するには、背景が不透明な2番目の要素を作成する必要があります。

<a href="detailed.html" class="plus">
    <span>Find Out More!</span>
</a>

.block a.plus {
    background: url("images/plus.png") no-repeat 0% 40%;
    background-position: 10px , 0px;
    font-size: 12px;
    display: inline-block;
    padding-left: 16px; /* actual width of one icon */
}
.block a.plus:hover{
    /*Just for example*/
    background-position: 0 -16px;
}   
.block a.plus span{
    background-color: #fff;
}

2番目の要素を使用したくない場合は、アイコンを再配置する必要があります。

于 2012-06-23T14:28:19.117 に答える
0

これは、：beforeセレクターを使用して実現できます。

<a href="detailed.html" class="plus">Find Out More!</a>

a.plus {
    position: relative;
    padding-left: 25px;
}

a.plus:before {
    position: absolute;
    left: 0;
    content: " ";
    width: 15px;
    height: 15px;
    background: red url("images/plus.png") 10px 0 no-repeat;
}
​

色redはテスト用です。省略してもかまいません。-10px 0スプライト内の画像の場所です（x y）。

于 2012-06-23T15:00:39.200 に答える