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

nanati 9년 전 조회 7,162

</p><p>$('.mI_icon01').hover(</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>function (e) {</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>//ボタンに乗った時の処理</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>$('.mI_textarea').fadeIn()</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>$('.mI_textarea .mI_text01').show()</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>$('.mI_text01').hover(</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>function (e) {</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>//テキストエリアに乗った時の処理</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>},</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>function (e) {</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>//テキストエリアから外れた時の処理</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>$('.mI_textarea').fadeOut()</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>$('.mI_textarea .mI_text01').hide()</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>);</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>},</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>function (e) {</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>//ボタンから外れた時の処理</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">		</span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>);</p><p>

위와 같은 코드를 적어서

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

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

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

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

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

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

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

#javascript #jquery

댓글을 작성하려면 로그인이 필요합니다.

답변 10개

정렬:

채택된 답변

+20 포인트

슈와이

9년 전

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

nanati

9년 전

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

�

슈와이

9년 전

$('.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

9년 전

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

댓글을 작성하려면 로그인이 필요합니다.

Rido

9년 전

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

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

</p><p> </p><p><script></p><p>$(".mI_icon01").click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea').fadeIn();</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea .mI_text01').show();</p><p>});</p><p> </p><p>$(".mI_icon02").click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea').fadeIn();</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea .mI_text02').show();</p><p>});</p><p> </p><p>$(".mI_icon03").click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea').fadeIn();</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea .mI_text03').show();</p><p>});</p><p> </p><p>$(".mI_icon04").click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea').fadeIn();</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea .mI_text04').show();</p><p>});</p><p> </p><p>$(".mI_icon05").click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea').fadeIn();</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea .mI_text05').show();</p><p>});</p><p> </p><p>$('.closed').click(function (e) {</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea').fadeOut();</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('.mI_textarea .mI_text01').hide();</p><p>});<span class="Apple-tab-span" style="white-space:pre">		</span></p><p></script></p><div>
</div><p> </p><p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

nanati

9년 전

감사합니다!!!!! 고생 많으셨어요 ㅠ ㅠ

Rido

9년 전

ㅋㅋㅋ 고생한게 뭔 소용이레요 잘되는지가 중하죠 그래서 되나요?

nanati

9년 전

왠지 죄송해서요 ㅠ ㅠ
열심히 도와주셨는데 채택 안해드려서-ㅅ ㅠ
슈와이님이 코드 모아서 해주셔서 ... 그걸로 넣었드니 잘 되네요 ㅠ ㅠ

댓글을 작성하려면 로그인이 필요합니다.

Rido

9년 전

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

nanati

9년 전

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

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

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

댓글을 작성하려면 로그인이 필요합니다.

Rido

9년 전

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

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

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

nanati

9년 전

스크립트 밑에 일단
[code]
$(".mI_textarea .closed").click(function(){
$(this).parents(".mI_textarea").animate({ opacity: "hide" }, "slow");
});
[/code]
위와 같이 닫기 버튼을 만들었습니다.

댓글을 작성하려면 로그인이 필요합니다.

nanati

9년 전

CSS 추가합니다.

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

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Rido

9년 전

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

nanati

9년 전

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

nanati

9년 전

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

댓글을 작성하려면 로그인이 필요합니다.

에이치H

9년 전

$('.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(); }); });

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

nanati

9년 전

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

�

에이치H

9년 전

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

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

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

nanati

9년 전

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

댓글을 작성하려면 로그인이 필요합니다.

Rido

9년 전

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

nanati

9년 전

[code]
<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>

[/code]

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

[code]
<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>

[/code]

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

댓글을 작성하려면 로그인이 필요합니다.

sinbi Expert

9년 전

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

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

$('.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]

로그인 후 평가할 수 있습니다

답변에 대한 댓글 7개

nanati

9년 전

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

sinbi

9년 전

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

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

nanati

9년 전

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

sinbi

9년 전

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

nanati

9년 전

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

sinbi

9년 전

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

nanati

9년 전

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

댓글을 작성하려면 로그인이 필요합니다.

Rido

9년 전

$('.mI_icon01').hover(

이늠을

$('.mI_icon01').click(

이렇게 변경해주세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

nanati

9년 전

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

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

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

답변 10개

답변에 대한 댓글 3개

답변에 대한 댓글 3개

답변에 대한 댓글 1개

답변에 대한 댓글 1개

답변에 대한 댓글 2개

답변에 대한 댓글 3개

답변에 대한 댓글 1개

답변에 대한 댓글 7개

답변에 대한 댓글 1개

공유하기