마우스 오버 질문입니다..
본문
$(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
$("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);
}
);
전 이렇게 밖에 못하겠네요.
다른분의 쌈박한 코드를 기대하여+ㅅ+
아, 호버를 왜 생각하지 못했을까요,, 마우스 오버로 해도 먹히네요,,
감사합니다.
this 대신에 자녀 요소의 클래스나 아이디를 적어주면 되지 않을까요?
$(".gnb_1da img").attr('src', this.src.replace('off', 'on'))
네 이렇게도 해봤지만 먹지를 않네요..
적용하려는 부분 html을 보여 주세요.
소스 보기로 한 html요.
<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>
이렇게 생겼습니다.
img에는 패딩값이 없어서 꼭 img위에 올려야 모양이 바뀌더라구요
a값에는 패딩이 있어서,,
그리고 마우스 오버하면 보더가 생겨야 해서 꼭 a 값에 마우스를 올려도 이미지가 바뀌었으면 합니다..
답변을 작성하시기 전에 로그인 해주세요.
