Question

我有这个样本：

代码HTML：

SED PERSPICIATIS

                    Sed ut perspiciatis unde omnis iste natus error sit                     志愿者诉讼，劳动力，劳动力，劳动力                     totam rem aperiam，eaque ipsa quae ab illo inventore
                    veritatis et quasi architecto beatae vitae dicta sunt
                    explicabo。

.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%);
}

CODE CSS：

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

});

CODE JS：

tab-bottom-content

我希望只有当鼠标结束时才会显示div std::vector<int> v{5, 6, 4, 3, 2, 6, 7, 9, 3}; std::nth_element(v.begin(), v.begin() + v.size()/2, v.end()); std::cout << "The median is " << v[v.size()/2] << '\n';中的文本。

我尝试使用上面的脚本，但遗憾的是无效

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

提前致谢！

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：）

Answer 2

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

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

Answer 3

你需要＆＃39;。＆＃39;在此 .find（＆＃34; tab-bottom-content＆＃34;）

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

或内嵌样式，以隐藏“标签 - 底部内容”＃39;内容第一

Answer 4

您可以将tab-bottom-content的不透明度设置为0，然后将其更改为1伪选择器类中的:hover，以便在您悬停时显示文本超过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/

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

4 个答案: