投稿日: 2022年8月10日2022年12月3日 投稿者: phg72974JQueryを使った機能いろいろ JQuery機能のいろいろ マウスオーバーでslidedown、他の場所をクリックでslideup練習 ここにカーソルを乗せると(If you put the cursor here )・・・ ここに現れる ここにまた現れる HTML <h4>マウスオーバーでslidedown、他の場所をクリックでslideup練習</h4> <ul> <li class=”mouse”>ここにカーソルを乗せると(If you put the cursor here )・・・</li> <ul class=”over”> <li>ここに現れる</li> <li>ここにまた現れる</li> </ul> JavaScript $(function(){ $(‘.over’).hide() $(‘.mouse’).mouseover (function(){ $(this).next().slideDown(‘slow’); }) $(‘html’).click(function(){ $(‘.over’).slideUp(2500) }) }); CSS li:hover{ text-decoration: underline; color: red; } マウスオーバーでテキストが書き換えられ、文字色も変わり、マウスアウトでテキストが書き換えられ文字色も変わる練習 ここにマウスオーバーしてください(Mouse over here ) HTML <div class=”d1″> <ul> <li>ここにマウスオーバーしてください(Mouse over here )</li> </ul> </div> JavaScript $(function(){ $(‘.d1’).mouseover(function(){ $(‘.d1’).text(‘マウスオーバーしました| Mouse over ‘).css(‘color’,’blue’) }); $(‘.d1’).mouseout(function(){ $(‘.d1’).text(‘マウスアウトしました| Mouse out’).css(‘color’,’red’) }); }); マウスオーバー、アウト、それとメソッドチェーンを使いフェードアウト、フェードインの練習 HTML <div class=”you”></div> JavaScript $(function(){ $(‘.you’).mouseover(function(){ $(this).css(‘background’,’blue’); }); $(‘.you’).mouseout(function(){ $(this).css(‘background’,’grey’).fadeOut(4000).fadeIn(3000) }); }); CSS .you{ position: relative; background-color: #6c00ff; width: 200px; height: 200px; } JQueryライブラリの読み込み <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> わからないことはプロフェッショナルから学ぶのが一番 キャリアアップに必要なスキルを取得しよう。 オンラインで受講ができるスクールですので、全国どこからでも。