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

Posted 2023-05-07

【中文标题】如何仅在鼠标悬停时显示文本

【英文标题】：How can display text only when mouse over

【发布时间】：2016-05-17 07:25:47

【问题描述】：

我有这个样本：

link

编码 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   src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/1-380x380.png" class="attachment-news wp-post-image" > </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   src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/1-380x380.png" class="attachment-news wp-post-image" > </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 中的文本仅在鼠标悬停时显示。

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

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

提前致谢！

【问题讨论】：

你的代码笔是空的。

对不起，现在好了

【参考方案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/