hover アーカイブ - CodingMania

マウスオーバーするとtransitionを使って右へ文字を寄せます

yotigory — Thu, 07 May 2015 03:17:04 +0000

HTMl



Before selecting lighting
Lighting basics
The light required for each room
The psychological impressions due to changes in light color(color temperature)
Applying the impact of light
The workings and differences of lights
Types of light sources
Features of principal light sources
Styles of lights
Types and features of principal lighting fixtures

CSS

/* mod_menulist
-----------------------------------------*/
.mod_menulist{
 margin:0 20px 0 20px!important;
}
.mod_menulist ul{
}
.mod_menulist ul li{
 display:block;
 line-height:1.3!important;
}
.mod_menulist ul li a{
 display:table;
 width:100%;
 box-sizing:border-box;
 padding:12px 12px 5px 12px!important;
 -ms-transition:all 0.3s linear 0s;
 -moz-transition:all 0.3s linear 0s;
 -webkit-transition:all 0.3s linear 0s;
 transition:all 0.3s linear 0s;
 border-bottom:solid 1px #dfdfdf!important;
}
.mod_menulist ul li a:before{
 font-family: 'FontAwesome';
 content: "\f105";
 font-size:18px!important;
 color:#666666;
 font-weight:bold;
 display:table-cell;
 vertical-align:middle;
 line-height:1;
 width:15px;
 padding:0 14px 5px 12px!important;
}
.mod_menulist ul li a:hover{}
.mod_menulist ul li a:link    {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:visited {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:hover   {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}
.mod_menulist ul li a:active  {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}

投稿マウスオーバーするとtransitionを使って右へ文字を寄せますは CodingMania に最初に表示されました。

マウスオーバーするとtransitionを使ってborderを太くします

yotigory — Tue, 14 Apr 2015 07:42:57 +0000

HTMl


会社概要へ



トップページへ戻る



文字が長くなったりセンター位置にしてみたり

CSS

/* mod_btn
-----------------------------------------*/
.mod_btn{
 margin:10px 0 10px 0;
}
.mod_btn-center{
 text-align:center;
}
.mod_btn p{
 border:solid 1px #E73582;
 display:inline-block;
}
.mod_btn p a{
 display:block;
 padding:10px 10px 10px 10px;
 color:#E73582;
 font-size:13px;
 -ms-transition:all 0.3s ease 0s;
 -moz-transition:all 0.3s linear 0s;
 -webkit-transition:all 0.3s linear 0s;
 transition:all 0.3s linear 0s;
 border:solid 3px #FFF;
}
.mod_btn p a:after{
 font-family: 'FontAwesome';
 content: "\f101";
 display:inline-block;
 padding:0 0 0 10px;
}
.mod_btn p a:link    {color:#E73582; text-decoration:none;}
.mod_btn p a:visited {color:#E73582; text-decoration:none;}
.mod_btn p a:hover   {color:#E73582; text-decoration:none; border:solid 3px #E73582;}
.mod_btn p a:active  {color:#E73582; text-decoration:none; border:solid 3px #E73582;}

投稿マウスオーバーするとtransitionを使ってborderを太くしますは CodingMania に最初に表示されました。

サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！

yotigory — Wed, 31 Aug 2011 12:02:30 +0000

JSを読み込みます

[swapimage.js]JavaScript

$(function(){
 $(".mod_thumbnail").each(function(){
  var set = $(this);
  var btn = set.find(".thumbnaillist li a");
  var image = set.find(".mainimglist img");
	// hover時
	$(btn).hover(function(){
		$(image).attr("src",$(this).attr("href"));
		$(image).attr("alt",$(this).attr("title"));
	});
	//クリック時   
	$(".thumbnaillist a").click(function(){
	return false;
	});
});
});

HTMl

CSS

/* mod_thumbnail
--------------------------------------------*/
.mod_thumbnail{
 margin:0 0 30px 0;
}
/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
}
.thumbnaillist ul{
}
.thumbnaillist li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.thumbnaillist li a{
	display:block;
}
.thumbnaillist li a:link    {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover   {opacity:0.8;}
.thumbnaillist li a:active  {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}

/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
	width:700px;
	height:350px;
	margin:20px 0 0 0;
}
.mainimglist img{
}

投稿サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！は CodingMania に最初に表示されました。

ツールチップ表示をjQueryでオリジナル化

yotigory — Sun, 17 Apr 2011 04:31:43 +0000

JSを読み込みます

[tooltip.js]JavaScript

$(function(){
   $("span.tip").prepend("").css({
			 position:"absolute",
			 display:"none"
			 });
   $("a.tip").mouseover(function(){
				 $("+span.tip",this).show();
				 }).mouseout(function(){
					  $("+span.tip",this).hide();
				 }).mousemove(function(e){
					 $("+span.tip",this).css({
						   "top":e.pageY+40+"px",
						   "left":e.pageX+-10+"px"
					   });
			 });
   });

HTMl

ツールチップ表示のデモリンクはここここにツールチップテキストをいれるです。
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。

ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。
ツールチップ表示のDEMOぺーじです。ツールチップ表示のデモリンクはここここにツールチップテキストをいれる
ここにツールチップテキストをいれるです。
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。

CSS

span.tip {
    padding: 5px;
	color:#000000;
	text-decoration:none;
    background-color:#FFFFCC;
    border: 1px solid #69F;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 9999;
	background:#FFFFCC url('point.gif') no-repeat -10px -10px;
}
/* 矢印位置 */
span.tip img{
	position:absolute;
	top:-10px;
	left:10px;
}

投稿ツールチップ表示をjQueryでオリジナル化は CodingMania に最初に表示されました。

テキストで作る。ドロップダウンメニュー・プルダウンメニュー

yotigory — Sat, 16 Apr 2011 05:27:30 +0000

JSを読み込みます

[dropdown_t.js]JavaScript

$(function(){

	//ドロップダウン表示	   
  $(".mod_dropnavi ul.topmenu li.slidebtn a").addClass("close");
  $(".mod_dropnavi ul.submenu").addClass("close");
	
  $(".mod_dropnavi ul.topmenu li.slidebtn>a").each(function(){
  var allsubmenu = $(".mod_dropnavi ul.submenu");
  var btn = $(this);
  var submenu = $(this).next();
  btn.click(function(){
    if($(this).hasClass("open")){
			$(this).removeClass("open").addClass("close");
			$(submenu).slideUp("fast");
    }else{
			$(allsubmenu).slideUp("fast");
      $(".mod_dropnavi ul.topmenu li.slidebtn a").removeClass("open").addClass("close");
			$(submenu).slideDown("fast");
			$(btn).removeClass("close").addClass("open");
		}
		return false;
		});
  });

});

HTMl



Menu01
Menu02

Menu02_Aのタイトルが長い場合は幅を指定
Menu02_B
Menu02_C


Menu03
Menu04

Menu04_A
Menu04_B
Menu04_C
Menu04_D

CSS

/* テキストで作るdrop downリスト
-----------------------------------------*/
/* Topmenu部分 */
.mod_dropnavi ul.topmenu{
	width:920px;
	height:45px;
	border-top:solid 1px #CCC;
	border-bottom:solid 1px #CCC;
	background-color:#336600;
}
.mod_dropnavi ul.topmenu li{
	width:150px;
	float:left;
	position:relative;
	text-align:center;
	line-height:45px;
	border-right:solid 1px #CCC;
}
.mod_dropnavi ul.topmenu li a{
	width:100%;
	height:100%;
	display:block;
	color:#FFFFFF;
	font-weight:bold;
}
.mod_dropnavi ul.topmenu li a:link    {text-decoration:none;}
.mod_dropnavi ul.topmenu li a:visited {text-decoration:none;}
.mod_dropnavi ul.topmenu li a:hover   {text-decoration:none; color:#FFFF66;}
.mod_dropnavi ul.topmenu li a:active  {text-decoration:none; color:#FFFF66;}


/* サブメニュー階層は通常は非表示 */
.mod_dropnavi ul.topmenu li.slidebtn ul.close{display:none;}


/* サブ階層部分 */
.mod_dropnavi ul.topmenu li ul.submenu{
	position:absolute;
	top:45px;
	left:-1px;
	white-space:nowrap;
	border-left:solid 1px #CCC;
}
.mod_dropnavi ul.topmenu li ul.submenu li{
	height:35px;
	text-align:left;
	line-height:35px;
	text-indent:10px;
	clear:both;
	border-bottom:solid 1px #CCC;
}
.mod_dropnavi ul.topmenu li ul.submenu.menu2 li{
	width:290px;
}
.mod_dropnavi ul.topmenu li ul.submenu li a{
	color:#339900;	
	background-color:#EEE;
}
.mod_dropnavi ul.topmenu li ul.submenu li a:link    {text-decoration:none;}
.mod_dropnavi ul.topmenu li ul.submenu li a:visited {text-decoration:none;}
.mod_dropnavi ul.topmenu li ul.submenu li a:hover   {text-decoration:none; background-color:#DDD; color:#339900;}
.mod_dropnavi ul.topmenu li ul.submenu li a:active  {text-decoration:none; background-color:#DDD; color:#339900;}

投稿テキストで作る。ドロップダウンメニュー・プルダウンメニューは CodingMania に最初に表示されました。

画像で作る。ドロップダウンメニュー・プルダウンメニュー

yotigory — Sun, 03 Apr 2011 06:22:21 +0000

JSを読み込みます

[dropdown.js]JavaScript

$(function(){
	//マウスオーバー
	$(".mod_dropnavi ul li img").mouseover(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
	}).mouseout(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
	}).each(function(){
		$("").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
	});
	//ドロップダウン表示	   
  $(".mod_dropnavi ul.topmenu li.slidebtn>a").addClass("close");
  $(".mod_dropnavi ul.submenu").addClass("close");
	
  $(".mod_dropnavi ul.topmenu li.slidebtn>a").each(function(){
  var allsubmenu = $(".mod_dropnavi ul.submenu");
  var btn = $(this);
  var submenu = $(this).next();
  btn.click(function(){
    if($(this).hasClass("open")){
			$(this).removeClass("open").addClass("close");
			$(submenu).slideUp("fast");
    }else{
			$(allsubmenu).slideUp("fast");
      $(".mod_dropnavi ul.topmenu li.slidebtn>a").removeClass("open").addClass("close");
			$(submenu).slideDown("fast");
			$(btn).removeClass("close").addClass("open");
		}
		return false;
		});
  });

});

HTMl

CSS

/* 画像で作るdrop downリスト
-----------------------------------------*/
/* Topmenu部分 */
.mod_dropnavi ul.topmenu{
	width:920px;
	height:45px;
}
.mod_dropnavi ul.topmenu li{
	float:left;
	position:relative;
}
.mod_dropnavi ul.topmenu li.topmenu01{width:150px;}
.mod_dropnavi ul.topmenu li.topmenu02{width:149px;}
.mod_dropnavi ul.topmenu li.topmenu03{width:149px;}
.mod_dropnavi ul.topmenu li.topmenu03{width:149px;}

.mod_dropnavi ul.topmenu li a{
	display:block;
	width:100%;
	height:100%;
}

/* サブ階層部分 */
.mod_dropnavi ul.topmenu li ul.submenu{
	width:150px;
	position:absolute;
	top:45px;
	left:-1px;
}
.mod_dropnavi ul.topmenu li ul.submenu.close {
 display:none;
}
.mod_dropnavi ul.topmenu li ul.submenu li{
	height:44px;
	clear:both;
}

投稿画像で作る。ドロップダウンメニュー・プルダウンメニューは CodingMania に最初に表示されました。

javascriptでinput画像ボタンにロールオーバーをつける

yotigory — Sun, 03 Apr 2011 02:37:06 +0000

HTMl

CSS

.mod_formbtn{
	width:500px;
	text-align:center;
}
.mod_formbtn ul{
  letter-spacing:-0.4em;
}
.mod_formbtn ul li{
  letter-spacing:normal;
  display:inline-block;
  *display: inline;
  *zoom: 1;
  margin:0 15px 0 15px;
}
.mod_formbtn li a{
 display:block;
 background:transparent url('clear_on.gif') no-repeat top left;
}
.mod_formbtn li a:hover img{
 opacity:0;
}

投稿 javascriptでinput画像ボタンにロールオーバーをつけるは CodingMania に最初に表示されました。

CSSでツールチップを表示します。

yotigory — Sat, 19 Mar 2011 09:08:34 +0000

HTMl

ツールチップ表示のここにツールチップテキストをいれるデモリンクはここです。
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。

CSS

/* リンクスタイル設定 */
a.tooltip:link{color:#000;}
a.tooltip:visited{color:#000;}
a.tooltip:hover{color:#FFF; background-color:#690; text-decoration:none; position:relative;}
a.tooltip:active{color:#FFF; background-color:#690; text-decoration:none;}
/* ツールチップスタイル設定 */
a.tooltip span{
	display:none;
}
a.tooltip:hover span{
	display:block;
	position:absolute;
	top:25px;
	left:20px;
	white-space:nowrap;/* 折り返し無し */
	color:#000;
	text-decoration:none;
	line-height:1.2;
	border:#690 solid 2px;
	background-color:#FFC;
	padding:5px;
}

投稿 CSSでツールチップを表示します。は CodingMania に最初に表示されました。

サイドナビ、サイドメニューを画像で作る。

yotigory — Sun, 13 Mar 2011 11:15:33 +0000

HTMl

CSS

.mod_Sidemenu002{
	width:200px;
	padding:10px;
	background-color:#DDD;
}
.mod_Sidemenu002 h3{
}
.mod_Sidemenu002 ul{
	border-top:solid 1px #CCC;
}
.mod_Sidemenu002 ul li{
	height:40px;
	overflow:hidden;
	vertical-align:bottom; /* IE6で画像下の隙間削除 */
	border-bottom:solid 1px #CCC;
}
.mod_Sidemenu002 ul li a{
	display:block;
}
.mod_Sidemenu002 ul li a:link    {text-decoration:none;}
.mod_Sidemenu002 ul li a:visited {text-decoration:none;}
.mod_Sidemenu002 ul li a:hover   {margin-top:-40px;}
.mod_Sidemenu002 ul li a:active  {margin-top:-40px;}

投稿サイドナビ、サイドメニューを画像で作る。は CodingMania に最初に表示されました。

CSSの背景色を使ってマウスオーバー時、画像に枠をつける。

yotigory — Sun, 13 Mar 2011 09:17:20 +0000

HTMl

CSS

.mod_Rollover001 a{
	width:220px;
	height:124px;
	padding:9px;
	display:block;
	border:1px solid #999;
	background:#FFF;
}
.mod_Rollover001 a:link    {}
.mod_Rollover001 a:visited {}
.mod_Rollover001 a:hover   {background:#666;}
.mod_Rollover001 a:active  {background:#666;}

投稿 CSSの背景色を使ってマウスオーバー時、画像に枠をつける。は CodingMania に最初に表示されました。