【jQuery】マウスがのった要素の背景色を変えるよ、hover( )
【jQuery】マウスがのった要素の背景色を変えるよ、hover( ):
[マウスが乗った要素の背景色を変えるよ]
http://gsken.sakura.ne.jp/jQuery/js02.html
コードは以下のとおり。
一応ですがCSSも
タイトルにもある通り、マウスがのった要素の背景色を変えるというもの。
そして、その加えられたcssというのがこちら
hover、mouseenter、mouseleave に関しては以下のサイトを参考にさせていただきました。
http://blog.webcreativepark.net/2013/12/02-140448.html
ありがとうございます。
hover( ) よりも mouseenter( ) & mouseleave( ) の方が使い勝手がいいとのことですがなんでだろう？
検討さえつきません。
hover( ) のアドバイスをもらって僕が考えたのはこちら
hoverアクションで直接cssに手を加えて背景色を変更するというものでした。
addClass( ) 、 removeClass( ) の方がスッキリするような気がした一日でした。
まずは結論を
[マウスが乗った要素の背景色を変えるよ]http://gsken.sakura.ne.jp/jQuery/js02.html
コードは以下のとおり。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>マウスが乗った要素の色を変えるよ</title>
<link rel="stylesheet" href="css/rest.css">
<link rel="stylesheet" href="css/js02.css">
</head>
<body>
<main>
<div class="list-title">
<h2>EQUIPMENT</h2>
</div>
<ul class="list">
<li class="list-item">Backpacks & Bags</li>
<li class="list-item">Ropes</li>
<li class="list-item">Climbing & Safety</li>
<li class="list-item">Avaianche Safety</li>
<li class="list-item list-item-b">Sleeping Bags</li>
</ul>
</main>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(".list-item").hover(function(){
//hoverメソッド。mouseenter（要素にマウスが乗ったとき）とmouseleave（要素からマウスが離れたとき）を一発で指定
// 参考サイト（ http://blog.webcreativepark.net/2013/12/02-140448.html ）
$(this).addClass("selected")
//cssを事前に用意しておいて、そのクラスを追加（削除）する。
},function(){
$(this).removeClass("selected")
});
</script>
</body>
</html>
body{
text-align: center;
}
main {
width:320px;
margin: 0 auto
}
.list-title {
text-align: center;
}
h2 {
width: 240px;
font-size: 24px;
padding: 8px 0;
margin: auto;
}
li {
width: 240px;
padding: 8px 0;
font-size: 16px;
margin: auto;
}
li:nth-child(odd) {
border: 1px #000000 solid;
}
li:nth-child(even) {
border-right: 1px #000000 solid;
border-left: 1px #000000 solid;
}
.list-item-b {
border-bottom: 1px #000000 solid;
}
.selected {
background-color: #dcdcdc;
}
本日の課題は
タイトルにもある通り、マウスがのった要素の背景色を変えるというもの。
hover( )について
$(".list-item").hover(function(){
// hoverメソッド - mouseenter（ ）とmouseleave（ ）を一発で指定
// mouseenter( ) - 要素にマウスが乗ったとき( )内のアクションを実行
// mouseleave( ) - 要素からマウスが離れたとき( )内のアクションを実行
$(this).addClass("selected")
// addClass( ) - ( )内のクラスをcssを追加。
// 事前に背景色を変えるcssを用意しておき、
// そのクラスをマウスが乗った .list-item に加えることで背景の色を変える。
},function(){
$(this).removeClass("selected")
// removeClass( ) - ( )内のクラスをcssを削除。
.selected {
background-color: #dcdcdc;
}
http://blog.webcreativepark.net/2013/12/02-140448.html
ありがとうございます。
hover( ) よりも mouseenter( ) & mouseleave( ) の方が使い勝手がいいとのことですがなんでだろう？
検討さえつきません。
ちなみに
hover( ) のアドバイスをもらって僕が考えたのはこちら$(".list-item").hover(function(){
$(this).css("background-color", "#dcdcdc")
},function(){
$(this).css("background-color", "#ffffff")
});
addClass( ) 、 removeClass( ) の方がスッキリするような気がした一日でした。
コメント
コメントを投稿