2年 ago
1649 Views

コピペで使える簡単マウスオーバー7個

css

リンク個所を分かりやすくするためにも大事なマウスオーバーの工夫。サイトのデザインに合わせてちょっと工夫してあげると見栄えも変わってきますよね。そんなビギナーのためのマウスオーバーの簡単なやり方をご説明。コピペで使えるからすぐに取り入れてみてくださいな。cssとかわかんなーいって方にもすぐ使えるようにスタイルはインラインで書いてますのでコピペでOK!

コピペで簡単設置のマウスオーバー

■文字色を変える

<style>
a:hover{
color:#000;
text-decoration:underline;
}
</style>

■枠線を変える

<style>
.change {
width:200px;
padding:20px;
background-color:#eee;
border:3px #999 solid;
}
.change:hover {
border:3px #000 solid;
}
</style>

■画像を使ったマウスオーバー

<style type="text/css">
a:link.link1{
  display:block;
  width:100px;
  height:100px;
  background-image:url(★ベース画像★);
  text-indent:-10000px;
  list-style:none;
}
a:hover.link1{
  display:block;
  width:100px;
  height:100px;
  background-image:url(★置き換え画像★);
  text-indent:-10000px;
  list-style:none;
}
</style>
  
<a href="リンク先URL" class="link1"></a>

■透過するマウスオーバー

img {
  transition: 0.5s;
}
img:hover {
  opacity: 0.7;
 filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

■画像拡大するマウスオーバー

<style>
.img-block {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.img-block img {
  transition: 0.5s;
}
.img-block img:hover {
  -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
}
</style>
<div class="img-block">
 <img src="" alt="" />  
</div>

■マウスオーバーで画像が移動

<div class="img-block">
 <img src="" alt="" />  
</div>
<style>
.img-block {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.img-block img {
  transition: 0.5s;
}
.img-block img:hover {
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
}
</style>

■マウスオーバーで回転

<div class="img-block">
 <img src="" alt="" />  
</div>
<style>
.img-block {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.img-block img {
  transition: 0.5s;
}
.img-block img:hover {
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
</style>
Article Categories:
html&CSS
12345 (No Ratings Yet)
Loading...

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ