Show different heading text on mouseover (flashlight effect)
Question
I am trying to create a heading that says one thing but says something different when you mouse over it.
So for example if I had two absolute positioned headings
One appearing over top of the other, both with white text on black backgrounds.
Now I want a circle to appear where the mouse cursor is so that if you were to move it over the "Sa" for example, you would see the letters "Cr" coming through. Kind of like a flashlight effect to reveal the div underneath.
This is what the heading would look like with no mouseover
Thanks in advance! Jesse
3 answers
solution1
2 2017-10-16 05:15:07
You can try this sample code.
<body>
<h3>Welcome</h3>
</body>
h3:hover{
font-size:150%;
color: blue;
}
h3:hover:before{
content:"Hello!";
opacity:0.5;
}
solution2
2 ACCPTED 2017-10-23 10:24:05
Please try this code.
$(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>
Here is the jsfiddle demo
solution3
0 2017-10-16 06:36:52
You could use a bit of JavaScript and the onmouseenter and onmouseleave attributes.
Do something like
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>
When mouse comes over the "Sa", the function entered() is called to make it "Cr" and when mouse leaves it left() is called to restore it.
The id change and <span> tag are used to identify the part of document that needs to be changed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.