jquery로 hover만들기 질문이요!!!
본문
안녕하세요.
jquery쓰다가 궁굼한점이 생겼는데 검색을 아무리해도 찾을수가 없네요...
도와주세요 ㅜㅜ
css에 상태를 나타내는 :hover, :link, :active등등 태그 뒤에 ':상태'를 나타내는게 있잖아요.
지금까지 제이커리 쓸때는 on이나 off 등등으로 li.on, div.over 이런거로 css를 추가해두고 사용했는데요.
ex)
div{background:red;}
div.on{background:gray;}
<div></div>
<p class="pBtn">색바꾸기</p>
$(".pBtn").click(function(){
$("div").addClass("on");
});
이런걸 제이커리에서 바로 상태가 변경되게 하는 방법은 없을까요???
그렇게하면 css로 hover상태에 대한것만 한줄 더 적어주면 스크립트의 사용량이 적어저서 사이트가 더 빨라지지 않을까요???
제가지금 버튼만들때 바인드나 토글로 만들어서 이후변화까지 적어줘서 사용하거나,
버튼마다 온클릭으로 펑션으로 만들어서 쓰거나
엘리먼트에 참조용데이터를 추가한담에 버튼 누를때마다 스크립트로 해당 엘리먼트에있는 참조용데이터를 계속 스캔해해서 사용하고 있거든요...
그러니깐 작은거에도 누르거나 마우스오버할때마다 스크립트 읽으니깐 속도가 ㅎㄷㄷ 해지더라고요...
그리고 요즘 안그래도 스크립트 사용해야 만들어지는 효과들 원하는 사이트들이 많은데 상태나타내는걸로 처리가능한 기능들을 줄이면 사이트 속도도 빨라지지 않을까요???
답변 1
질문을 구체적으로 잘 이해를 못하겠는데요,,,
javascript(jQuery포함)는 클라이언트 즉 웹브라우저에서 돌아가는 것이기 때문에
조금 길어진다해서 서버에 그리 큰 영향을 끼지지 않습니다.
<div></div>가 여러개 있을 때 마우스오버 하면 각각이 따로 적용이 되게 하는 것이라
이해하고 전개를 해 보자면...
<style>
div{background:red;}
</style>
<div>예제1</div>
<div>예제2</div>
<div>예제3</div>
<script>
$(document).ready(function(){
$("div").hover(function(){
$(this).css("background-color","gray");
},function(){
$(this).css("background-color","red");
});
});
</script>
이런 식으로 $(this)를 넣으시면 이벤트가 발생한 요소에만 적용되게 됩니다.
이런걸 요구하셨는지 모르겠습니다 ㅎㅎ
