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

【问题标题】：How can display text only when mouse over如何仅在鼠标悬停时显示文本
【发布时间】：2016-05-17 07:25:47
【问题描述】：

我有这个样本：

编码 HTML：

SED 潜伏期

Sed ut perspiciatis unde omnis iste natus 错误坐
voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illoinvente
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 中的文本仅在鼠标悬停时显示。

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

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

提前致谢！

【问题讨论】：

你的代码笔是空的。
对不起，现在好了

标签： javascript jquery html css

【解决方案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 :)

【讨论】：

【解决方案2】：

您最初应该使用display: none 隐藏.tab-bottom-content，如下所示。

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

并使用下面的 jQuery。你错过了tab-bottom-content之前的.

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

【讨论】：

【解决方案3】：

你需要'.'在这个 .find("tab-bottom-content")

$(".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);
});

Here is the pen

您还必须添加 CSS

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

或内联样式先隐藏“tab-bottom-content”内容

【讨论】：

【解决方案4】：

您可以将tab-bottom-content 的不透明度设置为0，然后在其:hover 伪选择器类中将其更改为1，以便在您将鼠标悬停在tab-bottom-content div 上时显示文本。您甚至可能想要添加一个transition 以便不透明度平滑地变化。这样做，

.tab-bottom-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
  opacity: 0;
  transition: opacity .4s ease-in;
}

.tab-bottom-content:hover {
  opacity: 1
}

看看https://jsfiddle.net/5s1fv2a9/

【讨论】：