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

Question

我有这个样本:

link

代码 HTML:

SED 念珠菌

sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt
说明。

<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 tab-bottom-content 中的文本仅在鼠标悬停时显示。

我尝试使用上面的脚本但不幸的是不起作用

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

提前致谢!

Answer 1

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

像这样fiddle

示例 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 :)