1

cssコードに見られるように、不透明度0.3に設定された背景画像があり、ホバリングすると0.8に設定されます。

画像コードです。

<td background="images/1a.png" class="logo" width="160" height="160">
    <div class="ch-info">
        <h3><br>Add New Deal</h3>
    </div>
</td>

css コード。

.ch-info {
    letter-spacing: 2px;
    font-size: 20px;
/*  margin: 0 30px; 
    padding: 45px 0 0 0;*/
    height: 140px;
    font-family: 'Open Sans', Arial, sans-serif;
    -webkit-text-stroke: 1px black;
    color: #d3d3d3;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    vertical-align:middle;
    text-align:center;
}
.logo
{
    opacity:0.3;
    filter:alpha(opacity=30); /* For IE8 and earlier */
    background-repeat:no-repeat;
    background-position:center; 
}
.logo:hover
{
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */ 
    background-repeat:no-repeat;
    background-position:center;
}

テキストと背景はホバリング効果を行います。マウスが背景の上にあるときにテキストを固定し、背景を 0.8 でホバリングし、背景がホバリングされているかどうかに関係なく、テキストを固定したままにします。

4

3 に答える 3

2

コメントで述べたように、子は親から不透明度を継承します。.ch-infoクラスは から不透明度を継承するため.logo、直接の親を にすることはできません.logo。

そうは言っても、を使用する<div class="logo"></div>前にまたはと同じ高さで、目的の背景を持っているだけです... ただし、onを使用する必要があるため、問題にはなりません。.ch-infoposition: absolute;<td>.ch-infoposition:relative;.ch-infoz-index

デモ: http://jsfiddle.net/dirtyd77/mSg97/3/

HTML:

<table>
<tr>
    <td width="160" height="160">
        <div class="logo" style="background:blue;"></div>
        <div class="ch-info">
             <h3>Add New Deal</h3>
        </div>
    </td>
</tr>
 <tr>
    <td width="160" height="160">
        <div class="logo" style="background:red;"></div>
        <div class="ch-info">
             <h3>Add New Deal</h3>
        </div>
    </td>
</tr>
<tr>
    <td width="160" height="160">
        <div class="logo" style="background:orange;"></div>
        <div class="ch-info">
             <h3>Add New Deal</h3>
        </div>
    </td>
</tr>

CSS:

.logo
{
    width:160px; 
    height:160px;
    position:absolute;
    opacity:0.3;
    filter:alpha(opacity=30); /* For IE8 and earlier */
    background-repeat:no-repeat;
    background-position:center; 
}
.logo:hover
{
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */ 
}
.ch-info {
    letter-spacing: 2px;
    font-size: 20px;
/*  margin: 0 30px; 
    padding: 45px 0 0 0;*/
    font-family: 'Open Sans', Arial, sans-serif;
    -webkit-text-stroke: 1px black;
    color: #d3d3d3;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    vertical-align:middle;
    text-align:center;
    position:relative;
}

ご不明な点がございましたら、お知らせください。

編集: ただし、この状況は jQuery に適しているようです。以下に例を示しました。

デモ: http://jsfiddle.net/dirtyd77/mSg97/4/

于 2013-08-23T19:39:07.060 に答える
0

「.logo:hover」内にフォントなどを指定してみましたか？

    .logo:hover
    {
        opacity:0.8;
        filter:alpha(opacity=80); /* For IE8 and earlier */ 
        background-repeat:no-repeat;
        background-position:center;
        letter-spacing: 2px;
        font-size: 20px;
        height: 140px;
        font-family: 'Open Sans', Arial, sans-serif;
        -webkit-text-stroke: 1px black;
        color: #d3d3d3;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        vertical-align:middle;
        text-align:center;
    }
于 2013-08-23T19:15:04.427 に答える
0

このcssクラスを追加してみてください

.logo:hover .ch-info {
    opacity: 0.375;
}
于 2013-08-23T19:13:32.137 に答える