- CSS 이동 구현
1 예시 1: 마우스오버로 동작[ | ]
html
Copy
<style>
.box1 {
position: absolute;
left: 0;
width: 150px; height: 150px;
background: red;
transition: 1.5s;
}
.box1:hover {
left: 300px;
}
</style>
<div class='box1'></div>
2 예시 2: 버튼 클릭으로 동작[ | ]
html
Copy
<style>
.box1 {
position: absolute;
left: 0;
width: 150px; height: 150px;
background: red;
transition: 1.5s;
}
</style>
<button id='btn-move'>박스 이동</button>
<div class='box1'></div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
$("#btn-move").click(function() {
$(".box1").css('left', '300px');
});
});
</script>