마우스 오버 질문입니다.. 채택완료
humanb2box
8년 전
조회 5,054
</p><p style="margin-left: 40px;"><span class="Apple-tab-span" style="white-space:pre"> </span>$(function () {</p><p style="margin-left: 40px;"><span class="Apple-tab-span" style="white-space:pre"> </span>$('.gnb_1da img').mouseover(function () {</p><p style="margin-left: 40px;"><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).attr('src', this.src.replace('off', 'on'))</p><p style="margin-left: 40px;"><span class="Apple-tab-span" style="white-space:pre"> </span>}).mouseout(function () {</p><p style="margin-left: 40px;"><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).attr('src', this.src.replace('on', 'off'))</p><p style="margin-left: 40px;"><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p style="margin-left: 40px;"><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p>
이미지에 마우스 오버하면 이미지 경로 접근해서 텍스트를 변경하는건데요 ㅠ
.gnb_1da 이곳에 마우스를 올려도 자녀요소가 바뀌가할 수 있을까요? ㅠㅠ
감이 안잡히네요 ㅠ children 요소로 하니 this가 먹질 않네요..
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
8년 전
</p><p> </p><p style="margin-left: 0px;">$("a.gnb_1da").hover(</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>//hover</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var aa = $(this).children('img').attr('src').replace('off', 'on');</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).children('img').attr('src', aa);</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 style="margin-left: 40px;">//out</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var bb = $(this).children('img').attr('src').replace('on', 'off');</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).children('img').attr('src', bb);</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> </p><p>);</p><p>전 이렇게 밖에 못하겠네요.
다른분의 쌈박한 코드를 기대하여+ㅅ+
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
h
humanb2box
8년 전
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
h
humanb2box
8년 전
[code]
<ul id="gnb_1dul">
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu0_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu1_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu2_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu3_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu4_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu5_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu6_off.png" alt="" />
</a>
</li>
</ul>
[/code]
이렇게 생겼습니다.
img에는 패딩값이 없어서 꼭 img위에 올려야 모양이 바뀌더라구요
a값에는 패딩이 있어서,,
그리고 마우스 오버하면 보더가 생겨야 해서 꼭 a 값에 마우스를 올려도 이미지가 바뀌었으면 합니다..
<ul id="gnb_1dul">
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu0_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu1_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu2_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu3_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu4_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu5_off.png" alt="" />
</a>
</li>
<li class="gnb_1dli">
<a class="gnb_1da" href="">
<img src="<?php echo G5_THEME_URL?>/img/menu6_off.png" alt="" />
</a>
</li>
</ul>
[/code]
이렇게 생겼습니다.
img에는 패딩값이 없어서 꼭 img위에 올려야 모양이 바뀌더라구요
a값에는 패딩이 있어서,,
그리고 마우스 오버하면 보더가 생겨야 해서 꼭 a 값에 마우스를 올려도 이미지가 바뀌었으면 합니다..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사합니다.