HYUIT'S STORY

제이쿼리 마우스 오버시 글자뒤에 배경색 주기 본문

STUDY/html + css

제이쿼리 마우스 오버시 글자뒤에 배경색 주기

HYUIT 2017. 12. 1. 10:48

마우스를 글자 위에 오버했을 때, 

스타일 효과가 나타나게 해볼거예요^^



<html>


<style type="text/css">

p.text{background:#f60; color:#fff;}

</style>


- 마우스 오버 시, 나타날 style효과 지정


<p>Menu1</p>

<p>Menu2</p>

<p>Menu3</p>


<script type="text/javascript">

$(function(){

$("p").hover(function(){

$(this).addClass("text");

}, function(){

$(this).removeClass("text");

});

});

</script>


 - 여기에서 'this'는 "내가 (선택or~)했다면.." 이런 뜻임.


<결과>



Menu2 에 마우스 오버했을 때의 모습이예요.^^*


'STUDY > html + css' 카테고리의 다른 글

figure과 figcaption  (0) 2017.12.24
태그  (0) 2017.12.24
사이트에 알맞은 이미지 선택  (0) 2017.12.23
display  (0) 2017.12.23
utf-8 변환하기  (0) 2017.11.30
'STUDY/html + css' Related Articles more