change <input> value

by John Doe

HTML

<input type="text" value="hover over the boxes">
<a data="111">111</a>
<a data="222">222</a>
<a data="333">333</a>

CSS

body{
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 12px;
  color: #252525;
}
a{
  padding: 2px 5px;
  border: 1px solid #9CACB6;
  border-radius: 3px;
  transition: all 300ms ease-in-out;
}
a:hover{
  background-color: #9CACB6;
  color: #fefefe;
  cursor: pointer;
}
input{
  transition: all 300ms ease-in-out;
}

input.hovered{
  box-shadow: 1px 1px 11px rgba(156, 172, 182, 0.7);
}

JavaScript

$( "a" ).click(function() {
  $('a').removeClass('yes');
  $(this).addClass('yes');
});
$('a').mouseenter(function() {
	$('input').addClass('hovered');
	var a = $(this).attr('data');
  $('input').val('search for: ' + a);
});
$('a').mouseleave(function() {
	if($('a').hasClass('yes')){
  	var a = $('.yes').attr('data');
    $('input').val('search for: ' + a);
  }
  else{
  	$('input').val('hover over the boxes');
  };
  $('input').removeClass('hovered');
});