메뉴위에 마우스 커서가 오면 색깔이 변하는 스크립트 아시나요
본문
| 메뉴1 | 메뉴2 | 메뉴3 |
위에 메뉴위에 마우스 커서가 오면 색깔이 변하는 스크립트 아시나요?
답변 6
거뭐 스크립트까지 쓸 필요는 없습니다.
CSS로 쉽게 구현할수 있습니다.
매 메뉴 엘리먼트:hover { color: '바꾸려는 색깔' }
이렇게 간단히 할수 있습니다. 궂이 자바스크립트로 하려면
<span onmouseover='menu_over(event)' onmouseout='menu_out(event)'>메뉴1</span>
function menu_over(e) {
e.currentTarget.style.color = '바꾸려는 색깔';
}
function menu_out(e) {
e.currentTarget.style.color = '원래 색깔';
}
표안에서 구현하려면 어떻게 하면 좋을까요
$('.menu').on('hover', function() {
$(this).css('color', '#f00');
}, function() {
$(this).css('color', '#00f');
});
<span class="menu" id="menu1">메뉴1</span>
<span class="menu" id="menu2">메뉴2</span>
<span class="menu" id="menu3">메뉴3</span>
<script>
$(document).ready(function(){
$('.menu').on('hover', function(){
$(this).css("color", "red");
}, function(){
$(this).css("color", "black");
});
또는
$('.menu').on('hover', function(){
var id = $(this).attr('id');
$('#'+id).css("color", "red");
}, function(){
$('#'+id).css("color", "black");
});
});
</script>
표안에서 표색깔로 처리하려면 어떻게 해야할까여
기본 = black
1 = red
2 = blue
3 = green 일때
$('.menu').on('hover', function(){
var color = "black";
var id = $(this).attr('id');
if(id=="menu1"){
color="red";
}else if(id == "menu2"){
color = "blue";
}
$('#'+id).css("color", color);
}, function(){
$('#'+id).css("color", "black");
});
이런식?아니면
<span class="menu" id="menu1" data-color="red">메뉴1</span>
<span class="menu" id="menu2" data-color="blue">메뉴2</span>
<span class="menu" id="menu3" data-color="green">메뉴3</span>
애초 태그로 색상을 박고
$('.menu').on('hover', function(){
var color = $(this).attr('data-color');
var id = $(this).attr('id');
$('#'+id).css("color", color);
}, function(){
$('#'+id).css("color", "black");
});
그냥 css 단에서도 처리 가능합니다.
해당 개체가 button 클래스라면
.button:hover {background:#cc0000;}
해당 페이지 주소를 올리시면
정확한 답변을 얻으실 수 있을 겁니다.
아마도 호스트 내에서 ddos 로 의심되는 ip 접속을 자동으로 차단한듯 합니다.
찝찝하시면 차단내역 채크해보세요^^
무슨 말씀이신지 모르겠네요?
마우스 오버 시 폰트 색상 변경하는 질문 이시던데...
이 댓글이 왜 여기에 달려있죠???;;;