js 마우스 오버 이벤트를 클릭 이벤트로 변경하고 싶습니다

nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016.11.14 10:13:42 7137 (121.♡.♡.146)

본문


$('.mI_icon01').hover(
		function (e) {
			//ボタンに乗った時の処理
			$('.mI_textarea').fadeIn()
			$('.mI_textarea .mI_text01').show()
			$('.mI_text01').hover(
				function (e) {
					//テキストエリアに乗った時の処理
				},
				function (e) {
					//テキストエリアから外れた時の処理
					$('.mI_textarea').fadeOut()
					$('.mI_textarea .mI_text01').hide()
				}
			);
		},
		function (e) {
			//ボタンから外れた時の処理
		}
		
	);

위와 같은 코드를 적어서

메인 이미지슬라이드 안에 버튼을 설치하여 마우스 오버 하면

숨겨진 텍스트가 보여지도록 했는데요,

이것을 마우스오버가 아닌 클릭하면 나타나는 것으로 변경하고 싶습니다.

자바스크립트를 몰라서 hover부분을 click으로 바꾸면 되나 싶었는데

그게 아니더군요 ㅠ ㅠ...

아는 분들에게는 쉬울거라 믿고 질문합니다.

어느 부분을 수정해야 할까요? ㅠ

#javascript #jquery

답변 10

슈와이 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-11-14 11:31:28 58.♡.♡.136

$('.mI_icon li').on('click', function() {

$('.mI_textarea').fadeIn();

var name = '.mI_text0' + ($(this).index() + 1);

$(name).show()

$(name + ' .closed').on('click', function() {

$('.mI_textarea').fadeOut();

$(name).hide();

});

</script>

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 11:41:05121.♡.♡.146

1~5까지의 이벤트를 다 모아주셨네요 감사합니다.
아직 원인을 파악하지 못했는데 나타났다 사라지는 현상이 일어나서 원인을 찾고 있습니다 ㅠ ㅠ

↳ 슈와이 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 14:01:1658.♡.♡.136

$('.mI_icon li').on('click', function(e) {
e.preventDefault();
$('.mI_textarea').fadeIn();
var name = '.mI_text0' + ($(this).index() + 1);
$(name).show()
$(' .closed').on('click', function() {
$('.mI_textarea').fadeOut();
$(name).hide();
});
});

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 14:54:51121.♡.♡.146

감사합니다!
최종적으로 슈와이님 코드를 이용하게 되어서 채택했어요
도와주신 모든 분들께 감사드립니다....!!!!

Rido 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-11-14 10:21:14 39.♡.♡.30

$('.mI_icon01').hover(

이늠을

$('.mI_icon01').click(

이렇게 변경해주세요

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 10:25:04121.♡.♡.146

리도님 댓글 감사 ㅠ
글 읽으셨어요? ㅠㅠ 헝... 그렇게 해봤는데 안 움직여가지고용 ㅠ ㅠ
안에 쓴 내용이 잘못된 걸까요?

sinbi 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-11-14 10:28:52 118.♡.♡.186

아래 두 군데 모두 고쳐도 작동 않나요?

제이쿼리 초보인 제가 봤을 땐, 아래 두 군데 고치면 될 것 같은뎅.ㅋ

$('.mI_icon01').click(
		function (e) {
			//ボタンに乗った時の処理
			$('.mI_textarea').fadeIn()
			$('.mI_textarea .mI_text01').show()
			$('.mI_text01').click(
				function (e) {
					//テキストエリアに乗った時の処理
				},
				function (e) {
					//テキストエリアから外れた時の処理
					$('.mI_textarea').fadeOut()
					$('.mI_textarea .mI_text01').hide()
				}
			);
		},
		function (e) {
			//ボタンから外れた時の処理
		}
		
	);

[/code]

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 10:29:44121.♡.♡.146

제 말이요...
저도 전혀 모르는데 hover를 클릭으로 고치면 되나 싶었는데
안움직이더라고요... ㅡ,. ㅡ 제가 뭘 잘못한건지 하하하

↳ sinbi 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 10:34:09118.♡.♡.186

제이쿼리 코드를 html 보다 밑에 위치시킨 거 맞나요?
HTML 코드보다 위에 있으면 작동 안 되더라구요.
즉, 아래 순으로 나열돼야 작동하더라구요.

1. 제이쿼리 파일 스크리트 인클루드 코드
2. HTML 코드
3. 제이쿼리 스크립트 코드

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 10:35:49121.♡.♡.146

순서는 문제 없는 것 같아요~
마우스 오버 때는 아무런 문제가 없었으니까요...
아무래도 js문제가 아니고 css문제 같기도 하고 좀 더 연구해볼게요 ^^
답변 감사합니다~

↳ sinbi 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 10:42:51118.♡.♡.186

안에 있는 click 녀석을 toggle로 변경해보세요.

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 10:44:43121.♡.♡.146

토글...형식이 아닌데 토글로 바꿔도 되나요-ㅅ -?

↳ sinbi 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 10:51:31118.♡.♡.186

http://codepen.io/sinbi/pen/qqZgWw 참조해 작업해 보세요.

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 10:54:33121.♡.♡.146

감사합니다.
아래 리도님 댓글에 html을 올렸는데
저런 형식으로도 알려주신 부분이 가능할까요?

Rido 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-11-14 10:41:51 39.♡.♡.30

html전문을 다 올려봐주세요 ^^

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 10:48:54121.♡.♡.146


<div id="mainImg">
  <ul class="bxslider">
    <li class="mainImg01">slide01</li>
    <li class="mainImg02">slide02</li>
    <li class="mainImg03">slide03</li>
    <li class="mainImg04">slide04</li>
  </ul>
  <nav>
    <ul class="mI_icon">
      <li class="mI_icon01"><a href="icon01.png"><img src="" alt=""/></a></li>
      <li class="mI_icon02"><a href="icon01.png"><img src="" alt=""/></a></li>
      <li class="mI_icon03"><a href="icon01.png"><img src="" alt=""/></a></li>
      <li class="mI_icon04"><a href="icon01.png"><img src="" alt=""/></a></li>
      <li class="mI_icon05"><a href="icon01.png"><img src="" alt=""/></a></li>
    </ul>
  </nav>
  <ul class="mI_textarea">
    <li class="mI_text01">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text02">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text03">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text04">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text05">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
  </ul>
</div>

길어서 죄송 ㅋ 줄이긴 했는데 ㅡ,. ㅡ ㅋㅋ

에이치H 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-11-14 10:44:38 124.♡.♡.249

$('.mI_textarea').hide();
$('.mI_textarea .mI_text01').hide();
$('.mI_icon01').click(function (e) {
  //ボタンに乗った時の処理
  $('.mI_textarea').fadeIn();
  $('.mI_textarea .mI_text01').show();
  $('.mI_text01').click(function (e) {
    //テキストエリアに乗った時の処理
  },function (e) {
   //テキストエリアから外れた時の処理
   $('.mI_textarea').fadeOut();
   $('.mI_textarea .mI_text01').hide();
  });
});

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 11:05:23121.♡.♡.146

에이치H님 답변 감사합니다.
알려주신대로 수정해봤는데요, 일순 나타났다가 사라지는데
CSS문제일까요 ? ㅠ 왜 그럴까요... ㅡ,. ㅠ...

↳ 에이치H 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 11:09:54124.♡.♡.249

일순 나타낫다가 사라지는데 < - - - -
이부분을 이해를 못했는데 설명이 좀 필요할거같습니다

저한테는 css가 없기 때문에
$('.mI_textarea').hide();
$('.mI_textarea .mI_text01').hide();

이 두개가 상단에 추가 되었습니다.

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 11:18:12121.♡.♡.146

아... 죄송합니다 제가 설명을 잘 못했네요...
클릭하는 순간 숨겼던 내용들이 잠깐 나타났다가 다시 숨어버리는 현상을 말하는 건데요...
일단 css에서 display:none; 했었기 때문에 그 부분을 삭제 하고 알려주신대로 추가분의 hide를 넣었어요~
ㅠ 너무 어렵네요 ㅠ ㅠ

Rido 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-11-14 11:10:23 39.♡.♡.30

쓸모 없는것좀 빼고 잡아봤습니다. 참고가 되려나 모르겠네요


 
<script  src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 
 
<div id="mainImg">
  <ul class="bxslider">
    <li class="mainImg01">slide01</li>
    <li class="mainImg02">slide02</li>
    <li class="mainImg03">slide03</li>
    <li class="mainImg04">slide04</li>
  </ul>
  <nav>
    <ul class="mI_icon">
      <li class="mI_icon01"><img src="" alt=""/>ddddd</li>
      <li class="mI_icon02"><a href="icon01.png"><img src="" alt=""/></a></li>
      <li class="mI_icon03"><a href="icon01.png"><img src="" alt=""/></a></li>
      <li class="mI_icon04"><a href="icon01.png"><img src="" alt=""/></a></li>
      <li class="mI_icon05"><a href="icon01.png"><img src="" alt=""/></a></li>
    </ul>
  </nav>
  <ul class="mI_textarea">
    <li class="mI_text01" style="display:none">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text02" style="display:none">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text03" style="display:none">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text04" style="display:none">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text05" style="display:none">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
  </ul>
</div>
 
 
<script>
$('.mI_icon01').click(function (e) {
	$('.mI_textarea').fadeIn();
	$('.mI_textarea .mI_text01').show();
	$('.mI_text01').hover(function (e) {
		$('.mI_textarea').fadeOut();
		$('.mI_textarea .mI_text01').hide();
	});		
 
});
</script>

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 11:20:14121.♡.♡.146

.mI_icon01~.mI_icon05까지 같은 클릭 이벤트가 있는데요
알려주신 내용을 1~5까지 그대로 번호만 수정해서 나열하면 되나용? -ㅅ - ㅠㅠ
도통 알려주는 사람없이 하려니 죽겠네요 .. ㅠ 감사합니다

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 11:27:35121.♡.♡.146

답변 감사합니다.
일단 알려주신대로 수정을 해 보았는데, 에이치H님이 알려주신 코드와 마찬가지로
클릭한 순간 잠깐 보여졌다가 다시 사라집니다.
CSS를 추가로 올렸습니다. 혹시 시간 나시면 함 봐주세요 ㅠ

Rido 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-11-14 11:36:07 39.♡.♡.30

나타났다 사라지는건 jquery아래보면

$('.mI_text01').hover(function (e) {

이녀석에 마우스가 올라가면 사라지게 되어있어서 그런겁니다.

해당 닫기 버튼의 class나 id로 바꾸고 click이벤트로 바꾸시면 될거 같네요

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 11:40:03121.♡.♡.146

스크립트 밑에 일단


$(".mI_textarea .closed").click(function(){
		$(this).parents(".mI_textarea").animate({ opacity: "hide" }, "slow"); 
	});

위와 같이 닫기 버튼을 만들었습니다.

Rido 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-11-14 11:46:45 39.♡.♡.30

ㅋㅋㅋ jquery는 프로그래머 더러 짜라고 그러세요


<script  src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 
<style>
#mainImg .mI_textarea {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 0 30%;
	background: rgba(0,0,0,0.75);
	box-sizing: border-box;
}
#mainImg .mI_textarea li {
	padding-top: 130px;
	display: none;
	color: #fff;
	overflow: hidden;
}
#mainImg .mI_textarea .closed {
	text-align: right;
	cursor: pointer;
}
#mainImg .mI_textarea li .mI_pic {
	float: left;
	margin-right: 25px;
}
#mainImg .mI_textarea li dl {
	overflow: auto;
}
#mainImg .mI_textarea li dl dt {
	font-size: 4rem;
	font-weight: 500;
	margin-bottom: 15px;
}
#mainImg .mI_textarea li dl dd p {
	font-size: 1.6rem;
	font-weight: 300;
	margin-bottom: 20px;
}
 
 
/*------------- mI_icon -----------*/
#mainImg .mI_icon {
	width: 460px;
	height: 460px;
	top: 0;
	left: 50%;
	margin-left: -230px;
	position: absolute;
	background: url(wa.png) no-repeat center;
	background-size: cover;
}
#mainImg .mI_icon li {
	line-height: 0;
	width: 80px;
	position: absolute;
}
#mainImg .mI_icon .mI_icon01 {
	top: 10px;
	left: 50%;
	margin-left: -40px;
}
#mainImg .mI_icon .mI_icon02 {
	top: 140px;
	right: 0;
}
#mainImg .mI_icon .mI_icon03 {
	right: 70px;
	bottom: 30px;
}
#mainImg .mI_icon .mI_icon04 {
	left: 70px;
	bottom: 30px;
}
#mainImg .mI_icon .mI_icon05 {
	top: 140px;
	left: 0;
}
#mainImg .mI_icon li img {
	max-width: 100%;
}
 
</style>
 
<div id="mainImg">
  <ul class="bxslider">
    <li class="mainImg01">slide01</li>
    <li class="mainImg02">slide02</li>
    <li class="mainImg03">slide03</li>
    <li class="mainImg04">slide04</li>
  </ul>
  <nav>
    <ul class="mI_icon">
      <li class="mI_icon01"><img src="" alt=""/>ddddd</li>
      <li class="mI_icon02"><a href="icon01.png"><img src="" alt=""/></a></li>
      <li class="mI_icon03"><a href="icon01.png"><img src="" alt=""/></a></li>
      <li class="mI_icon04"><a href="icon01.png"><img src="" alt=""/></a></li>
      <li class="mI_icon05"><a href="icon01.png"><img src="" alt=""/></a></li>
    </ul>
  </nav>
  <ul class="mI_textarea">
    <li class="mI_text01">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text02">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text03">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text04">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
    <li class="mI_text05">
      <p class="closed"><img src="cross.svg" alt="닫기"></p>
      <div class="mI_pic"><img src="iconA_ov.png" alt=""/></div>
      <dl>
        <dt>제목</dt>
        <dd>
          <p>텍스트텍스트텍스트</p>
          <p class="btn_view"><a href="#"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>View</a></p>
        </dd>
      </dl>
    </li>
  </ul>
</div>
 
 
<script>
$('.mI_icon01').click(function (e) {
	$('.mI_textarea').fadeIn();
	$('.mI_textarea .mI_text01').show();
	$('.closed').click(function (e) {
		$('.mI_textarea').fadeOut();
		$('.mI_textarea .mI_text01').hide();
	});		
 
});
</script>

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-11-14 11:47:42121.♡.♡.146

제 말이요 ㅋㅋㅋ js 수정할 일 있을 때마다
여기에 신세지고 있는데 그것도 한 두번이지 ㅡ,. ㅡ
회사에 프로그래머 없습니다 ㅋㅋㅋ

일단 테스트 서버에 올려서 보여드릴게요,ㅠ ㅠ

http://bookmark.weblike.jp/test/
진즉에 이렇게 올릴걸... ㅡ,. ㅡ

Rido 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-11-14 13:43:28 39.♡.♡.30

스크립트 부분의 중복을 뺐습니다 -ㅂ-

아래 스크립트만 추가하셔도 필요한 기능은 사용가능 하실거 같습니다.


 
<script>
$(".mI_icon01").click(function(){
	$('.mI_textarea').fadeIn();
	$('.mI_textarea .mI_text01').show();
});
 
$(".mI_icon02").click(function(){
	$('.mI_textarea').fadeIn();
	$('.mI_textarea .mI_text02').show();
});
 
$(".mI_icon03").click(function(){
	$('.mI_textarea').fadeIn();
	$('.mI_textarea .mI_text03').show();
});
 
$(".mI_icon04").click(function(){
	$('.mI_textarea').fadeIn();
	$('.mI_textarea .mI_text04').show();
});
 
$(".mI_icon05").click(function(){
	$('.mI_textarea').fadeIn();
	$('.mI_textarea .mI_text05').show();
});
 
$('.closed').click(function (e) {
	$('.mI_textarea').fadeOut();
	$('.mI_textarea .mI_text01').hide();
});		
</script>

nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-11-14 11:24:19 121.♡.♡.146

CSS 추가합니다.


#mainImg .mI_textarea {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 0 30%;
	background: rgba(0,0,0,0.75);
	box-sizing: border-box;
}
#mainImg .mI_textarea li {
	padding-top: 130px;
	display: none;
	color: #fff;
	overflow: hidden;
}
#mainImg .mI_textarea .closed {
	text-align: right;
	cursor: pointer;
}
#mainImg .mI_textarea li .mI_pic {
	float: left;
	margin-right: 25px;
}
#mainImg .mI_textarea li dl {
	overflow: auto;
}
#mainImg .mI_textarea li dl dt {
	font-size: 4rem;
	font-weight: 500;
	margin-bottom: 15px;
}
#mainImg .mI_textarea li dl dd p {
	font-size: 1.6rem;
	font-weight: 300;
	margin-bottom: 20px;
}
 
 
/*------------- mI_icon -----------*/
#mainImg .mI_icon {
	width: 460px;
	height: 460px;
	top: 0;
	left: 50%;
	margin-left: -230px;
	position: absolute;
	background: url(wa.png) no-repeat center;
	background-size: cover;
}
#mainImg .mI_icon li {
	line-height: 0;
	width: 80px;
	position: absolute;
}
#mainImg .mI_icon .mI_icon01 {
	top: 10px;
	left: 50%;
	margin-left: -40px;
}
#mainImg .mI_icon .mI_icon02 {
	top: 140px;
	right: 0;
}
#mainImg .mI_icon .mI_icon03 {
	right: 70px;
	bottom: 30px;
}
#mainImg .mI_icon .mI_icon04 {
	left: 70px;
	bottom: 30px;
}
#mainImg .mI_icon .mI_icon05 {
	top: 140px;
	left: 0;
}
#mainImg .mI_icon li img {
	max-width: 100%;
}

위와 같이 CSS를 작성했습니다.

답변을 작성하시기 전에 로그인 해주세요.

js 마우스 오버 이벤트를 클릭 이벤트로 변경하고 싶습니다

QA