마우스 오버 질문입니다.. 채택완료
Copy
$(function () { $('.gnb_1da img').mouseover(function () { $(this).attr('src', this.src.replace('off', 'on')) }).mouseout(function () { $(this).attr('src', this.src.replace('on', 'off')) }); });
이미지에 마우스 오버하면 이미지 경로 접근해서 텍스트를 변경하는건데요 ㅠ
.gnb_1da 이곳에 마우스를 올려도 자녀요소가 바뀌가할 수 있을까요? ㅠㅠ
감이 안잡히네요 ㅠ children 요소로 하니 this가 먹질 않네요..
답변 3개
채택된 답변
+20 포인트
8년 전
Copy
$("a.gnb_1da").hover( //hover function(){ var aa = $(this).children('img').attr('src').replace('off', 'on'); $(this).children('img').attr('src', aa); },//out function(){ var bb = $(this).children('img').attr('src').replace('on', 'off'); $(this).children('img').attr('src', bb); } );전 이렇게 밖에 못하겠네요.
다른분의 쌈박한 코드를 기대하여+ㅅ+
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
humanb2box
8년 전
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
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 값에 마우스를 올려도 이미지가 바뀌었으면 합니다..
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
humanb2box
8년 전
[code]
$(".gnb_1da img").attr('src', this.src.replace('off', 'on'))
[/code]
네 이렇게도 해봤지만 먹지를 않네요..
$(".gnb_1da img").attr('src', this.src.replace('off', 'on'))
[/code]
네 이렇게도 해봤지만 먹지를 않네요..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사합니다.