在鼠标悬停时显示不同的标题文本（手电筒效果）

Question

我正在尝试创建一个标题，上面写着一件事，但是当您将鼠标悬停在上面时，标题却有所不同。

例如，如果我有两个绝对定位的标题

一个出现在另一个之上，两个都带有黑色背景上的白色文本。

现在，我希望在鼠标光标所在的位置出现一个圆圈，以便例如将其移动到“ Sa”上方时，您会看到字母“ Cr”通过。 有点像手电筒效果，可以显示下面的div。

没有鼠标悬停时标题就是这样

将鼠标悬停在“ Sa”上-效果不需要轮廓，它只是用于可视化

提前致谢！ 杰西

Answer 1

您可以尝试此示例代码。

<body>
<h3>Welcome</h3>
</body>


h3:hover{
font-size:150%;
color: blue; 
}

h3:hover:before{
content:"Hello!";
opacity:0.5;
}

Answer 2

请尝试此代码。

 $(function(){ $(".outer").mousemove(function(e){ var outer = $(this); var cursor = outer.find(".cursor"); var inner = outer.find(".inner"); var left = e.pageX - outer.offset().left - cursor.outerWidth() / 2; var top = e.pageY - outer.offset().top - cursor.outerHeight() / 2; if (left < 0) { left = 0; } if (top < 0) { top = 0; } if (left + cursor.outerWidth() > outer.outerWidth()) { left = outer.outerWidth() - cursor.outerWidth(); } if (top + cursor.outerHeight() > outer.outerHeight()) { top = outer.outerHeight() - cursor.outerHeight(); } cursor.show().css({left: left, top: top}); inner.css({left: -left, top: -top}); }).mouseleave(function(){ $(this).find(".cursor").hide(); }); });

 .outer{position: relative;cursor: none;} .outer, .inner{width: 300px;padding: 20px;font-size: 30px;background: #000;color: #fff;text-align: center;font-style: italic;} .cursor, .inner{position: absolute;left: 0;top: 0;} .cursor{width: 50px;height: 50px;overflow: hidden;border-radius: 50%;box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.8);display: none}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> Abcde Fghij <div class="cursor"><div class="inner">Klmno Pqrst</div></div> </div>

这是jsfiddle演示

Answer 3

您可以使用一些JavaScript以及onmouseenter和onmouseleave属性。

做类似的事情

 function entered(){ document.getElementById("change").innerHTML="Cr"; } function left(){ document.getElementById("change").innerHTML="Sa"; }

 <body> <span id="change" onmouseenter="entered()" onmouseleave="left()">Sa</span>cred spaces </body>

当鼠标移到“ Sa”上方时，将调用函数entered()将其设置为“ Cr”，当鼠标离开时，将调用left()函数以将其恢复。

id change和<span>标记用于标识文档中需要更改的部分。

在鼠标悬停时显示不同的标题文本（手电筒效果）

问题描述

3 个解决方案

解决方案1
2 2017-10-16 05:15:07

解决方案2
2 已采纳 2017-10-23 10:24:05

解决方案3
0 2017-10-16 06:36:52

在鼠标悬停时显示不同的标题文本（手电筒效果）

问题描述

3 个解决方案

解决方案1 2 2017-10-16 05:15:07

解决方案2 2 已采纳 2017-10-23 10:24:05

解决方案3 0 2017-10-16 06:36:52

解决方案1
2 2017-10-16 05:15:07

解决方案2
2 已采纳 2017-10-23 10:24:05

解决方案3
0 2017-10-16 06:36:52