Question

我有一个背景图片，设置不透明度为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，而文本保持稳定，无论背景是否悬停

Answer 1

正如我在评论中所说，儿童从父母那里继承了不透明性。 .ch-info类从.logo继承其不透明度，因此您不能让直接父级为.logo。

话虽如此，在使用<div class="logo"></div>的{{1}}之前只有.ch-info，与position: absolute;或<td>的高度相同，并且所需背景...但是，您必须在.ch-info上使用position:relative;，以便.ch-info不会成为问题。

的 DEMO： http://jsfiddle.net/dirtyd77/mSg97/3/ 的

<强> HTML：

z-index

<强> CSS：

<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>

如果您有任何问题，请与我们联系。

修改 的但是，这种情况似乎更适合jQuery。我在下面提供了一个例子。

的 DEMO： http://jsfiddle.net/dirtyd77/mSg97/4/ 的

Answer 2

尝试添加此css类

.logo:hover .ch-info {
    opacity: 0.375;
}

Answer 3

您是否尝试在“.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;
    }

CSS背景悬停文本

3 个答案: