マウスオーバーイベント

前はクリックイベントについて調べました。今度はマウスオーバーイベントです。

mouseenter();

前の講座でclick()を使いましたが、今度はclick()をmouseenter()に変更してくるだけです。
とても簡単ですね。

$('.class_name').mouseenter();

簡単ですよね。tagの上にマウスポインターを置いた時に作動します。

マウスポインターがtagから外れた時のイベント

mouseleave();

マウスポインターがtagから外れた時に何かを作動する時にはmouseleave();を使いますね。 

$('.class_name').mouseleave();

次の黄色のサークルの上マウスポインターを置いたり外れたりしてみましょう。

黄色のサークルの上マウスポインターを置いたり外れたりしてみましょう。

ではソースでやってみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
    $(function(){
        $('.yellow_circle').mouseenter(function(){
            $('.yellow_circle_word').text('マウスポインターが黄色のサークルの上にあります。');
        });
        $('.yellow_circle').mouseleave(function(){
            $('.yellow_circle_word').text('マウスポインターが黄色のサークルから外れました。');
        });
    });
</script>
</head>
<body>
    <div class="yellow_circle" style="width:40px;height:40px;border-radius:20px;background:yellow"></div>
    <p class="yellow_circle_word">黄色のサークルの上マウスポインターを置いたり外れたりしてみましょう。</p>
</body>
</html>

上のソースで初めて見るtext()が出ました。この関数はテキストを変更、または取得する関数です。 ^-^

難しくなですよね。この講座ではこれ mouseenter()　と　mouseleave()だけみてください。

mouseenter()と　mouseleave()を一つで使えるhover()もあります。

hover

hover()の使い方

$('.class_Name').hover(mouseenter()の機能,mouseleave()の機能);

example

$('.class_Name').hover(
    function(){
        //上に置いた時
        $('.class_Name').css('border','5px solid blue');
    },
    function(){
        //外れた時
        $('.class_Name').css('border','5px solid red');
    }
);

上のように使えます。

ではソースでやってみましょう。

HTML

<div class="hover1"></div>

CSS

.hover1{width:100px; height:50px; background:yellow}

jQuery

var hover1 = $('.hover1');
hover1.hover(function(){
    hover1.css('border','5px solid blue');
},
function(){
    hover1.css('border','5px solid red');
});

ソース

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
    $(function(){
        var hover1 = $('.hover1');
        hover1.hover(
            function(){
                hover1.css('border','5px solid blue');
            },function(){
                hover1.css('border','5px solid red');
            }
        );
    });
</script>
<style>
    .hover1{width:100px; height:50px; background:yellow}
</style>
</head>
<body>
<div class="hover1"></div>
</div>
</body>
</html>

結果

hover