-1
<form>
    <input id="b2" type="text" placeholder="Enter Name." name="name" maxlength="300">
    <br>
    <button id="b1" type="button name" >Submit</button>
</form>
<script> 
    document.getElementById("b1").hover = function() {
        document.getElementById("b2").style.color="blue";
    }; 
</script>
  • Input with id b2,
  • The button with id b1,
  • Hover on b1, change the color on b2
fuyushimoya
  • 9,715
  • 3
  • 27
  • 34
Chris
  • 3
  • 1
  • Post the JS code of what you did till now. – divy3993 Jul 08 '15 at 16:25
  • – Chris Jul 08 '15 at 16:28
  • And I found I could hover on one BUTTON and change the css on another BUTTON by using pure css #button1:hover + #button2 { border:solid 1px #ccc; } But don't know how to make change on an input – Chris Jul 08 '15 at 16:31
  • 1
    Probably this will be useful: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css?rq=1 – alfuco Jul 08 '15 at 16:31
  • Thank you alfuco, your link is very helpful. – Chris Jul 08 '15 at 16:39

3 Answers3

0

Here you are:

document.getElementById('b1').onmouseover = function(){
    document.getElementById('b2').style.color = 'red';
};
<form>
    <input id="b2" type="text" placeholder="Enter Name." name="name" maxlength="300">
    <br>
    <button id="b1" type="button name">Submit</button>
</form>

Hope this helps.

hungndv
  • 2,121
  • 2
  • 19
  • 20
  • @Chris: please accept and vote me up [http://stackoverflow.com/tour](http://stackoverflow.com/tour). Thank you. – hungndv Jul 08 '15 at 16:40
0

Something like this should work:

HTML

<form>
    <input id="b2" type="text" placeholder="Enter Name." name="name" maxlength="300">
    <br>
    <button id="b1" type="button name" >Submit</button>
</form>

JQuery

Executed when hovered by the mouse

$("#b1").hover(function() {
    $("#b2").css("color","red");
});

Executed when hovered by the mouse, stops when unhovered

$("#b1").mouseover(function() {
    $("#b2").css("color","red");
});
Michael Jones
  • 2,222
  • 18
  • 32
0

try with this

<form>
<input id="b2" type="text" placeholder="Enter Name." name="name" maxlength="300">

<button id="b1" type="button name" >Submit</button>
</form>

script.

$("#b1").hover(function(){
  $('#b2').css("background-color", "yellow");
}, function(){
$('#b2').css("background-color", "pink");

 });

here is the fiddle https://jsfiddle.net/z8vr6fwu/

Jean Andre Gonzalez
  • 188
  • 1
  • 9