マウスオーバーでslidedown、他の場所をクリックでslideup練習 | Slide down with mouse over, slide up practice with click elsewhere

• ここにカーソルを乗せると(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;
}

マウスオーバーでテキストが書き換えられ、文字色も変わり、マウスアウトでテキストが書き換えられ文字色も変わる練習 | Practice that the text is rewritten by mouse over and the text color changes, and the text is rewritten and the text color changes by mouse out

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')
});
});

マウスオーバー、アウト、それとメソッドチェーンを使いフェードアウト、フェードインの練習 | Practicing fade-out and fade-in using mouseover, out, and method chain

　

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>

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー