Question

我是HTML和CSS的新手，我已经发现鼠标悬停时如何淡化，但是当我鼠标悬停时，我该如何添加文字呢？这是我的HTML和CSS：

HTML ：

<div class="showTeams">
    <p>Please, select a team you'd like to view:</p>
    <table class="center">
        <tr>
            <th>
                <div class="tZ"> <a href="#">

                    <img id="tz" src="../images/teamZeus-pic.png" class="hover item-fade" alt="team Zeus" title="team Zeus"/>

                </a>

                </div>
            </th>
            <th>
                <div class="zC"> <a href="#">

                    <img src="../images/zeusCreations-pic.png" class="hover item-fade" alt="zeus Creations" title="zeus Creations"/>

                </a>

                </div>
            </th>
        </tr>
    </table>
</div>

CSS ：

.tZ {
    display:inline-block;
    background:#000;
}
.zC {
    display:inline-block;
    background:#000;
}
.item-fade {
    vertical-align:top;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.hover:hover {
    opacity:0.2;
}

我希望文本以与背景渐变相同的速度进入。谢谢你们

Answer 1

我不确定我是否理解你想要的东西，但我尝试了一些东西，所以你可以看一下：

<div class="showTeams">
    <p>Please, select a team you'd like to view:</p>
    <table class="center">
        <tr>
            <th>
                <div class="tZ"> <a href="#">

                    <img id="tz" src="../images/teamZeus-pic.png" class="hover item-fade" alt="team Zeus" title="team Zeus"/>

                </a>

<div id="hover-content">
        Text shows only on mouseover
</div>
                </div>
            </th>
            <th>
                <div class="zC"> <a href="#">

                    <img src="../images/zeusCreations-pic.png" class="hover item-fade" alt="zeus Creations" title="zeus Creations"/>

                </a>

                </div>
            </th>
        </tr>
    </table>
</div>

CSS：

.tZ {
    display:inline-block;
    background:#000;
}
.zC {
    display:inline-block;
    background:#000;
}
.item-fade {
    vertical-align:top;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.hover:hover {
    opacity:0.2;
}

#hover-content {
    color: white;
    display:block;
}
.tZ:hover #hover-content {
    display:none;
}

Answer 2

这里有两种方法可以使用css（jsfiddle setup for css）和jquery（jsfiddle setup for jquery）来执行此操作。你可以用任何方式执行

使用css你需要添加文本

<h2 class="heading">This is heading</h2>

和css将

    h2.heading {
  position: absolute;
  bottom: 101px;
  color: #fff;
    opacity:0;
  margin-left: 99px;
}
th:hover .heading
{
 opacity:1;   
}

使用jquery

添加此样式

h2.heading {
  position: absolute;
  bottom: 101px;
  color: #fff;
    display:none;
  margin-left: 99px;
}

和脚本

$(document).ready(function()
  {
      $('th').hover(function()

                    {
                    $(this).find('.heading').show();

                    })

    })

鼠标悬停时淡出和文字图像

2 个答案: