1

我有一个背景图像，它的不透明度设置为 0.3，然后在悬停时设置为 0.8，如 css 代码所示。

图像代码。

<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>before .ch-infothat uses , 与orposition: absolute;的高度相同，并且具有所需的背景......但是，您必须使用on所以不会成为问题。<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

尝试添加这个 css 类

.logo:hover .ch-info {
    opacity: 0.375;
}
于 2013-08-23T19:13:32.137 回答
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 回答