Is there a way in html or JS so that when I hover over something it changes?
Question
More specifically, when I hover my cursor over a picture it would transform into a different picture. Or what I'm actually looking for: When I hover over text it would change into different text.
Thanks.
4 answers
solution1
7 ACCPTED 2014-04-22 22:08:47
Yes, you would use the DOM events mouseenter and mouseleave . to change the image source.
Or you could use CSS :hover psuedo-class like this:
<div class="derp"></div>
.derp {
background-image:url(someURL);
}
.derp:hover {
background-image:url(someOtherURL);
}
solution2
1 2014-04-22 22:09:56
Yes, it's easiest with the CSS :hover pseudo-elector.
#theimage {
display: block;
width: 400px;
height: 400px;
background: url('image1.png') 0 0 no-repeat;
}
#theimage:hover {
background: url('image2.png') 0 0 no-repeat
}
If you want to do things that are more complicated then you can use Javascript, which can use more complicated logic and access properties and attributes like the src of an image tag.
You would also probably want to preload the image so that there is no delay the first time you hover (after clearing your cache). That's done best with Javascript:
<script>
(new Image).src = 'image2.png';
</script>
solution3
0 2014-04-22 22:19:32
For changing text, you'll probably want to use JS. You could do something like this:
<script type=text/javascript>
function changetext()
{
var textchange2 = "new text" ;
var id = document.getElementById("ElementToChange");
id.innerHTML=textchange2;
}
function changetextback()
{
var textchange2 = "original text" ;
var id = document.getElementById("ElementToChange");
id.innerHTML=textchange2;
}
</script>
<div id="ElementToChange" onmouseover="changetext();" onmouseout="changetextback();">original text</div>
solution4
0 2014-04-22 22:29:25
Yes, that is a standard function of Javascript to handle HTML DOM events. Using simple HTML/Javascript, you can attach an onmouseover event handler to run a Javascript function:
<html>
<head>
<script>
function changeText(obj){
// https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent
obj.textContent = "some new text";
// you could also use obj.innerHTML here, but
// that comes with security considerations
// https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
}
</script>
</head>
<body>
<div id="mydiv" onmouseover="changeText(this)">Some text</div>
</body>
</html>
There are convenience functions in Javascript frameworks like jQuery as well:
$(obj).text('Some new text from jQuery');
Note that you need to include the jQuery library in your <head> block to use it.
Attaching event handlers to DOM events via inline properties like onmouseover may result in harder to manage code over the long run. Attaching event listeners via code is better:
<html>
<head>
<script>
function changeText(event){
// the Event object - here called event as a variable name
// is passed implicitly
event.target.textContent = "some new text";
}
window.onload = function(){
document.getElementById("mydiv")
.addEventListener("mouseover", changeText, false );
}
</script>
</head>
<body>
<div id="mydiv">Some text</div>
</body>
</html>
jQuery makes it easy:
$(document).ready(function() {
$("#mydiv")
.on( "mouseover", function(event){
$(event.target).text('some new text');
});
});
I suggest you Google Javascript tutorials and go through an HTML/Javascript beginner's tutorial. Mozilla Developer Network is a good place to start learning:
https://developer.mozilla.org/en-US/
If you really get interested in it, check out NodeJS for server-side Javascript:
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.