jQuery/hover()

解説

onマウスアクションの指定

sample1

---

list1
list2
list3
list4

sample1code

$(function(){
  $('li').hover(
    function(){
      $(this).css({
    	backgroundColor: '#ffbbbb',
    	cursor: "pointer"
      });
      var str = $(this).text();
      $('#hovertext').text(str);
    },
    function(){
      $(this).css('backgroundColor','#777');
      str = '---';
      $('#hovertext').text(str);
    }
  );
});

sample2

element1

element2

element3

sample2code

$(function(){
  $("p").hover(function(){
  	$(this).fadeOut(500).fadeIn(500);
  });
});

sample3

s3Div

sample3code

$(function(){
  s3count = 0;
  $("#s3Div").hover(s3Func);
});
function s3Func(){
  s3count++;
  $("#s3Div").text(s3count);
}

sample4

s4Div

sample4code

$(function(){
  $("#s4Div").hover(function(){
  	$(this).animate({
  	  "width": "400px"
  	}, 1000);
  }, function(){
  	$(this).animate({
  	  "width": "100px"
  	}, 1000);
  });
});