<!DOCTYPE html>
<html>
<body>
<input type="text" onMouseover= "this.style.color='red'">Mouse over
me!</input>
</body>
</html>
I would also like to call "this.style.cursor='default'" along with "this.style.color='red'"
4 Answers
Declaratively
Separate calls with ;
<input type="text" onMouseover= "function1(); function2();">
Mouse over me!
</input>
Dedicated wrapper function
<input type="text" onMouseover="dedicatedFunction()">
Mouse over me!
</input>
and define this function in a <script> tag:
function dedicatedFunction() {
function1()
function2()
}
Imperatively
As Xufox said, you can also use addEventListener to do this:
This means that you have access to your DOM node directly as a Javascript object, by using a DOM Selector:
var node = document.getElementById('yourObjectId')
or directly by creating the DOM node via Javascript:
var node = document.createElement('input')
You can then use addEventListener on your object:
node.addEventListener('mouseover', function1)
node.addEventListener('mouseover', function2)
Or even directly use anonymous functions
node.addEventListener('mouseover', function () {
// ...
})
The benefits of this way is that you will be able to add event listeners any time you want. You will also be able to remove an eventListener any time you want by using removeEventListener
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/removeEventListener
6 Comments
Sebastian Simon
Three ways:
addEventListener (the better way).
kube
I agree,
addEventListener will be better when doing everything programmatically, but in this case the declarative way is the easiest way (imo).Sebastian Simon
@Tushar
:hover is different from a single mouseover in that mouseover can make a change persistent whereas :hover can’t.Sebastian Simon
And another benefit is that JS and HTML are properly separated and it results in more readable, maintainable and cleaner code. That’s actually really important as well.
|
you can write a function to multiple property
<input type="text" onMouseover= "callme(this)">Mouse over
me!</span>
<script>
function callme(obj){
obj.style.color='red'
obj.style.otherproperty ='value'
.
..... somthing else
}
</script>
Comments
you can simply use ; to separate two events:
<!DOCTYPE html>
<html>
<body>
<input type="text" onmouseover= "this.style.color='red';this.style.cursor='default';">Mouse over me!
</body>
</html>
But You'd better use <script> to write standard code:
<!DOCTYPE html>
<html>
<body>
<input type="text" onmouseover="foo(this);">Mouse over me!
<script type="text/javascript">
function foo(ele) {
ele.style.color="red";
ele.style.cursor="default";
}
</script>
</body>
</html>
using addEventListener is the best way, but it may cause compatibility question among browsers, you can read it for reference:
addeventlistener-vs-onclick
Comments
No need of using Javascript events here just for changing the color and cursor style on hover of an element.
You can use :hover class of CSS.
span:hover {
cursor: default;
color: red;
}
/* Override */
#input {
color: gray !important;
}<span>
<input id="input" type="text" onMouseover= "this.style.color='red'">Mouse over me!
</span>8 Comments
Scott
This is actually a good answer, considering OP is looking for
onMouseover eventsSebastian Simon
:hover is different from a single mouseover in that mouseover can make a change persistent whereas :hover can’t.
Tushar
@Xufox Didn't get what you're trying to say
Sebastian Simon
If you use just
mouseover, the color will stay red. If you use :hover the color will only be red when the element is actually hovered. It’s not the same. It would be the same if the OP used mouseover and mouseout to reverse the effects.Tushar
@Xufox I don't agree stackoverflow.com/questions/608788/…
|
addEventListenerinstead.inputelement with</span>in your real code.inputelement isn't open (it can't be, it's a void element). But yeah, there's definitely a dangling</span>there.closein quotes.