@ PHP

mouseover() mouseout()

mouseover() mouseout() は、特定の要素の上にマウスが重なったタイミングを感知して、処理を実行します。

event_mouse.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <a href="#"><img src="images/baba_off.gif" alt="baba" border="0"></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("a img").mouseover(function() {
    $(this).attr("src","images/baba_on.gif").attr("alt","baba_on")
  }).mouseout(function() {
    $(this).attr("src","images/baba_off.gif").attr("alt","baba_off")
  })
});
</script>
</body>

</html>

demo

hover() を使って記述することもできます。

event_event_hover.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <a href="#"><img src="images/baba_off.gif" alt="baba"></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("a img").hover(function() {
    $(this).attr("src", $(this).attr("src").replace("_off", "_on"))
  },function() {
    if (!$(this).hasClass("current")) {
      $(this).attr("src", $(this).attr("src").replace("_on", "_off"))
    }
  })
});
</script>
</body>

</html>

demo