Question

我是css和ui设计的新手。情况就是这样。我有一个div（divmain）。在divmain里面，我有一个图像和另一个div（sub_div）。 sub_div中有文本我希望在鼠标悬停时显示，否则只使用css隐藏（没有javascript / jquery）。请建议我应遵循的方法。

现在我正在做类似的事情：

HTML

<div class="divmain">
<img src="" />
<div class="sub_div">Some Text</div>
</div>

的CSS：

.divmain .sub_div {
    height: 70px;
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 2px 0px;
    color: #ffffff;
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    margin-top: 35px;
    line-height: 70px;

}

.divmain:hover .sub_div {
    opacity: 0.8;
}

Answer 1

以下代码可以帮助您：

.divmain{
width: 200px;
}

.sub_div{
display:none; /* This code hides the text initially */
/* Your sub_div styles can go here*/
 }

.divmain:hover .sub_div{
  display:block; /*Here we are making the .sub_div visible on hover*/
}

<div class="divmain">
<img src="http://wallpapercave.com/wp/EC4hMSt.png" width="200px" height="auto" />
<div class="sub_div">Some Text</div>
</div>

Answer 2

这应该可以帮到你

<div class="divmain">
<img src="mrm.gif" alt="Smiley face" />
<div class="sub_div">Some Text</div>
</div>

.divmain .sub_div {
      display: none;
}

.divmain:hover .sub_div {
    display: block;
}

Click to view CodePen

使用css在鼠标悬停时显示Div文本

2 个答案: