0

今日はもっと賢いフロントエンドコーディング忍者の助けが必要だと思います。

そのため、現在、ヘッダーにソーシャルメディアアイコンがいくつかあります。ロールオーバー時に、アイコンのimg背景色とテキストの色を変更します。

これで、liの設定方法は、アイコン画像をロールオーバーすると両方の項目（アイコンの背景とテキストの色）が変わりますが、テキストをロールオーバーしただけでは起こりません。テキストリンクのみをロールオーバーすると、テキストの色のみが変更され、アイコンの背景は変更されません。

あなたはここでこれを見ることができます： http ：//s433108212.onlinehome.us/

現在のHTML：

<div id="social_media">
    <ul id="social_icons">
        <li class="mail_chimp"><script type="text/javascript" language="JavaScript" src="http://athenasweb.us5.list-manage.com/subscriber-count?b=37&amp;u=d789790b-2a29-4119-8a43-0d71267eb0d7&amp;id=bc095e8eb4"></script></li>
        <a href="#" title="Subscribe to our Newsletter"><li class="social_li ico_newsletter"><p class="float-left">Get Email Newsletter</p><img src="http://s433108212.onlinehome.us/img/ico_newsletter.png" alt="Newsletter"/></a></li>
        <a href="http://facebook.com/athenasweb" title="Like our Facebook Page"><li class="social_li ico_facebook"><p class="float-left">Our Facebook Page</p><img src="http://s433108212.onlinehome.us/img/ico_facebook.png" alt="Facebook"/></a></li>
        <a href="http://twitter.com/athenas_web" title="Follow on Twitter"><li class="social_li ico_twitter"><p class="float-left">Follow us on Twitter</p><img src="http://s433108212.onlinehome.us/img/ico_twitter.png" alt="Twitter"/></a></li>
        <!-- <li><p>RSS Feed</p><img src="img/icon_rss.png" alt="RSS"/></li> -->
    </ul>
</div><!-- social_media -->

現在のCSS：

.social_li { list-style-type:none; font-family: 'Raleway', sans-serif; line-height:     32px; font-size: 16px; font-weight: 700; cursor: pointer; }
.social_li a { color:#4098db; }
.social_li a:hover { color:#fff; }
.social_li p { float: right; text-align: left; }

.ico_newsletter img, .ico_facebook img, .ico_twitter img {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    background: #cc0033;
    background-position:top center;
}
.ico_newsletter img {
    background: #cc0033;
}
.ico_facebook img {
    background: #064771;
}
.ico_twitter img {
    background: #00aced;
}
.social_li img:hover { 
    background: #666;
}

今、私はこの行を更新する必要があると思いました：

.social_li a:hover { color:#fff; }

私は試した：

.social_li a:hover { color:#fff; background:#666; }

ただし、テキストだけをロールオーバーすると、この結果が生成されました。 ここに画像の説明を入力してください

これは、a：hoverで特定のimg背景を制御できないためだと思います。

他の誰かがこれを以前に試したことがありますか？考え？:)

4

5 に答える 5

1

ここで使用する必要があるアプローチは、スプライトシートです。

例えば; 私のサイトでは、フッターにいくつかのソーシャルアイコンがあり、それらはすべてこの画像で構成されています。

ここに画像の説明を入力してください

ここで行ったことは、上の行に標準画像を含め、下の行にロールオーバー状態を含めるように設定したことです。

テキストの色と画像を変更するためにできることは、最初に、背景画像となる画像とテキストの両方のコンテナを作成することです。

<a href="#facebook" class="social fb">
    <div></div>
    Facebook
</a>

次に、いくつかのCSS：

a.social
{
    text-decoration: none;
    color: #000;
    display: inline-block;
}

a.social:hover
{
    color: #F00;
}

a.social > div
{
    height: 20px;
    background: url(http://martywallace.com/view/textures/sprite/social.png) no-repeat;
}

a.social.fb > div
{
    background-position: -15px 0;
}


/* Notice here how we target the child div of the a element being hovered over. */
a.social.fb:hover > div
{
    /* We change the background-position to sample a new portion of the sprite. */
    background-position: -15px -20px;
}

このJSFiddle（http://jsfiddle.net/gd4ha/）で、両方のソーシャルアイコンを使用して完全な例を作成しました。

于 2012-09-26T23:49:27.547 に答える
0

ここで上位2つの答えを見てください。

基本的に、jQueryが最良の選択肢かもしれません。

于 2012-09-26T17:25:20.533 に答える
0

問題は、テキストが画像よりもコード内で低レベルであるため、画像に適用された変更もテキストに影響を与える可能性がありますが、その逆は当てはまりません。Javascriptを使用して、テキストのマウスオーバーアクションで画像を変更しようとしましたか？

document.getElementByClassName("your-classname-here").setAttribute("class","new-classname-here");
于 2012-09-26T17:28:52.747 に答える
0

アイコン自体の一部として、アイコンの背景色を含めます。アイコンには2つのバージョンがあります。1つは標準のbgカラー、もう1つは灰色のbgです。次に、リストアイテムにアイコンの背景画像を作成し、リストアイテムにカーソルを合わせたときに背景画像を入れ替えるだけです。このコードへのアプローチ全体を変更しますが、もっとうまくいくと思います。

于 2012-09-26T17:36:46.953 に答える
0

画像とその中のテキストは明らかに1つの要素（ボタン）ですが、CSSの観点からは（正確にコード化されている方法によって異なります）、2つの別個の要素のように見えることがよくあります。

'a：hover'は'a'の特殊なケースであり、'anchor'（<a ...）ステートメントにのみ適用されます。'image'（<img ...）ステートメントもあるため、'img：hover'も必要になります。（あなたはそれらが関連していることを知っていますが、CSSはそうではありません。:-)

また、属性名のつづりを「background」と間違えましたが、「background-color」である必要があります。

したがって、これを完全にCSSで行うには、次のような2つの別個のステートメントを含む見苦しいコードが必要になる場合があります
。.social_lia：hover {color：#fff; }
.social_li img：hover {background-color：＃666; }

いずれの場合も、デフォルトでは、画像はすべてのピクセルを指定し、色は透けて見えません。（これを考える別の方法は、CSSが画像のどの部分を「背景」と見なすかわからないことです。）「半透明」（他のすべてのピクセルが透けて見える）または「透明」（すべてのピクセルが見える）を取得する必要がある場合があります選択した領域で）画像。

または、完全に異なるアプローチを使用した方がよい場合もあります。別の応答で指摘されているように、Javascriptによってスワップされた「上」と「下」の画像を分離するか、ボタンの周囲の境界線のみを強調表示して内部を変更しないか、色を変更します。テキストのみ、または色付けできる各ボタンの上に配置された半透明のスクリム、またはおそらく...

于 2012-09-26T19:54:01.520 に答える