nicepaper @ ウィキ
nicepaper @ ウィキ

マウスを載せたらペラっとめくれて透過する仕組みを作っていきます。11月12日記事

イメージ
マウスを載せる前

マウスを載せた後



目次




コード

HTML 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>マウスを載せたら消える付箋</title>
</head>
<body>
	<div id="wrapper">
		<section class="photo">
        </section>
        <section class="words">
        	<dl>
            	<dt>aaaaa</dt><dd>bbbbbb</dd>
            </dl>
        	<p class="husen"></p>
        </section>
        <section class="comment">
        	<p>コメントコメントコメントコメントコメントコメント</p>
        </section>
    </div>
</body>
</html>

CSS 

@charset "utf-8";
/* CSS Document */

#wrapper{
	margin: 10px auto;
	padding: 20px;
	border:1px solid #000;
	width:480px;
	min-height: 400px;
}
section.photo{
	margin:10px auto;
	width:480px;
	height:320px;
	background: #FCC;
}
section.words{
	position:relative;
}
section.words dl{
	margin:10px auto;
	width:480px;
	background: #cfc;
}
section.words dt{
	float:left;
	padding: 10px;
	width: 220px;
	height: 30px;
	background: #CCC;
	text-align: center;
}
section.words dd{
	float:left;
	padding: 10px;
	width: 220px;
	height: 30px;
	background: #FFF;
	text-align: center;
}
section.words p.husen{
	position:absolute;
	display: block;
	width:240px;
	height: 50px;
	background:#FF0;
	left: 240px;
}
section.words p.husen:hover{
	background-color:transparent;
}

section.comment{
	margin: 10px auto;
	padding: 5px;
	clear:both;
	width: 470px;
	height: 50px;
	background: #ccf;
}

メリットデメリット

メリット

jQueryを使わずできる。

デメリット

付箋の要素（今回はp要素）に文字が書かれた場合、文字は透過されない。 iOSの場合タップしても消えません。

まとめ

あまり使えません。そこで、クリックORタップでの条件処理に変えていきます。付箋のようにクリックORタップしたら透過する仕組みを作る2で行っていきます。

「付箋のようにマウスを載せたら剥がされる仕組みを作る1」をウィキ内検索
最終更新：2015年11月13日 15:32
添付ファイル