1
 <!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'"

kotAPI
  • 1,073
  • 2
  • 13
  • 37

4 Answers4

7

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

kube
  • 13,176
  • 9
  • 34
  • 38
  • 2
    Three ways: `addEventListener` (the _better_ way). – Sebastian Simon Aug 20 '15 at 10:42
  • I agree, `addEventListener` will be better when doing everything programmatically, but in this case the declarative way is the easiest way (imo). – kube Aug 20 '15 at 10:47
  • 1
    @Xufox If you read my [answer](http://stackoverflow.com/a/32116028/2025923), there's no need of using _events_ at all. This can be done by CSS only – Tushar Aug 20 '15 at 10:48
  • @Tushar `:hover` is different from a single `mouseover` in that `mouseover` can make a change persistent whereas `:hover` can’t. – Sebastian Simon Aug 20 '15 at 10:50
  • 1
    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. – Sebastian Simon Aug 20 '15 at 11:17
  • I do not agree that it is easier to separate the eventListener in a separate Javascript file. It will add some overhead by forcing you to select the object first, and you won't be aware of what object does what directly by reading the HTML file. Angular uses declarative intensively, and it makes HTML code easier to understand. – kube Aug 20 '15 at 11:24
1

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>
Shailendra Sharma
  • 6,976
  • 2
  • 28
  • 48
0

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>
Tushar
  • 85,780
  • 21
  • 159
  • 179
  • 2
    This is actually a good answer, considering OP is looking for `onMouseover` events – Scott Aug 20 '15 at 10:43
  • `:hover` is different from a single `mouseover` in that `mouseover` can make a change persistent whereas `:hover` can’t. – Sebastian Simon Aug 20 '15 at 10:51
  • @Xufox Didn't get what you're trying to say – Tushar Aug 20 '15 at 10:52
  • 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. – Sebastian Simon Aug 20 '15 at 10:54
  • @Xufox I don't agree http://stackoverflow.com/questions/608788/css-hover-vs-javascript-mouseover – Tushar Aug 20 '15 at 11:01
  • @Tushar You don’t agree that `:hover` reverses the effects when the mouse leaves the element and that `mouseover` makes a change persistent until undone with a `mouseout`? You can easily test it yourself! It’s even one of the answers to that question: http://stackoverflow.com/a/24235963/4642212 – Sebastian Simon Aug 20 '15 at 11:08
  • @Xufox I understand. But I think OP wants `hover`. The styles should be only applied when mouseover on elemnt – Tushar Aug 20 '15 at 11:11
  • Happened to trip in here by accident, but i think it's important to remember that CSS is limited to the document's style where as javascript is not. You can "do" everything in Javascript that can be done using CSS, but not the other way around. There are some things that CSS just cannot do, and it is limited further by possible roadblocks in the style such as !important, obfuscation, or dynamic page elements (that change each time the page loads). CSS is more like a feature that rids of us of needing to do everything via scripting, many of the tasks would be a harder without it. – osirisgothra Mar 27 '23 at 00:03
0

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

Community
  • 1
  • 1
MagicJuly
  • 433
  • 3
  • 7
  • 22