如何仅在鼠标悬停时显示文本

Question

我有这个样本：

链接

CODE超文本标记语言：

所有人都能清楚地理解错误所在，并能清楚地了解所有人的行为，包括发明者的行为，并能清楚地了解自己的真实性和准建筑风格。

<div class="col-md-4 tab-bottom">
    <div class="tab-bottom-img"><img width="380" height="380" src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/1-380x380.png" class="attachment-news wp-post-image" alt="1"> </div>
    <div class="tab-bottom-content">
        <div>
            <p class="title_bottom">SED PERSPICIATIS</p>
            <p class="content_bottom"></p><p>
                Sed ut perspiciatis unde omnis iste natus error sit<br>
                voluptatem accusantium doloremque laudantium,<br>
                totam rem aperiam, eaque ipsa quae ab illo inventore<br>
                veritatis et quasi architecto beatae vitae dicta sunt<br>
                explicabo.
            </p>
            <p></p>
        </div>
    </div>
</div>
<div class="col-md-4 tab-bottom">
    <div class="tab-bottom-img"><img width="380" height="380" src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/1-380x380.png" class="attachment-news wp-post-image" alt="1"> </div>
    <div class="tab-bottom-content">
        <div>
            <p class="title_bottom">SED PERSPICIATIS</p>
            <p class="content_bottom"></p><p>
                Sed ut perspiciatis unde omnis iste natus error sit<br>
                voluptatem accusantium doloremque laudantium,<br>
                totam rem aperiam, eaque ipsa quae ab illo inventore<br>
                veritatis et quasi architecto beatae vitae dicta sunt<br>
                explicabo.
            </p>
            <p></p>
        </div>
    </div>
</div>

代码CSS：

.col-md-4 {
    width: 33.33333333%;
}
.tab-bottom {
    position: relative;
    height: 400px;
    float:left;
}
.tab-bottom-img {
    width: 100%;
    position: absolute;
    top: 50%;
    height: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tab-bottom-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

代码JS:

$(".tab-bottom").bind('mouseover',function(event){
    $(this).find("tab-bottom-content").css("display", "block");
});
$('.tab-bottom-img').bind('mouseleave', function(e) {

});

我希望div选项卡底部内容中的文本仅在鼠标悬停时显示。

我试图使用上面的脚本但不幸的是不工作

你能帮我解决这个问题吗？

提前感谢！




Answer 1

你需要'.'在这个. search（"标签-底部-内容"）

$(".tab-bottom").on('mouseover',function(event){
    $(this).find(".tab-bottom-content").show(300);
});
$('.tab-bottom').on('mouseleave', function(e) {
    $(this).find(".tab-bottom-content").hide(300);
});

这是笔

您还必须添加CSS

.tab-bottom-content {
    display:none;
 }

或内联样式来首先隐藏选项卡底部内容

Answer 2

您应该首先隐藏. tab-under-Content使用show： no如下所示。

.tab-bottom-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none
}

并使用以下jQuery。你错过了 前选项卡底部内容

$(".tab-bottom").mouseover(function(event){
    $(this).find(".tab-bottom-content").show(300);
}).mouseleave(function(e) {
    $(this).find(".tab-bottom-content").hide(300);
});

Answer 3

我会用CSS来解决这个问题。

像这把小提琴

html示例：

<div class=tab-bottom>
  <div class=tab-bottom-content>
     Test
   </div>
</div>

CSS:

.tab-bottom{
  border: 1px SOLID #F00; /* For display purpose */
  width: 200px;
  height: 200px;
}

.tab-bottom.tab-bottom-content{
  display: none;
}
.tab-bottom:hover .tab-bottom-content{
  display: block;
}

这里不需要JavaScript或jQuery：）