HTML, JS에서 마우스 클릭으로 직사각형 파트의 색상을 변경하는 방법?

Question

작업 : 사각형의 어느 부분으로 마우스 커서를 움직이면 해당 섹션의 색이 변경되거나 클릭하면 삭제됩니다.

.square { 
 
    width: 300px; 
 
    height: 150px; 
 
    background: #9acd32; 
 
    margin: 30px; 
 
}

<div class="square"></div>

나는 JS에서 마우스를 클릭하여 전체 배경을 변경하는 방법을 이해하지만, 나는이 그림의 특정 섹션에이 작업을 수행하는 방법을 모르겠어요. 사각형 모양, 높이 및 너비의 색상이 변하는 영역을 변경할 수 있습니다.

HTML, JS를 사용하여 어떻게 구현할 수 있습니까? 이것을 위해 어떤 방법이 필요합니까? 이 작업은 캔바사에서 그려진 그림과 그 기능으로 만 해결 될 수 있습니까?

Answer 1

<div class="square"></div>의 전체 섹션을 변경할 수 없습니다.

하지만 다른 divs을 추가 할 수 있으며 클릭하면 보이는 스타일로 숨길 수 있습니다. 당신은 당신이 간단한 CSS로, 거의 당신이 SVG, here an example 아무것도를 타겟팅 할 수 있습니다 할 수 있어야 할 SVG를 사용하는 경우

또한 당신은 http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Answer 2

를 확인할 수 있습니다. 예를 들어 {SVG 요소 선택기}를 사용할 수 있습니다 : 커서를 CSS 속성으로 변경하려면 마우스를 올려 놓거나 document.querySelector ({SVG 요소 선택기})를 사용하여 addEventListener ('click', ...)와 같은 개념을 따르십시오.).

난 당신이 사각형 호버에 색상을 변경 jQuery를 삽입하고 그것을 제거 클릭하면 단순한 HTML

Answer 3

쉽게 그것을 할 수 있다고 생각하지 않습니다. 여기에 그것을 수행하는 방법입니다 : 귀하의 요청이 다시 질문에 빛을 가져다하지 않는 한 수행하는 것은 불가능

또한

$("#squareID").click(function() { 
 
    $(".square").remove(); 
 
}); 
 
$("#squareID").mouseover(function() { 
 
    $(this).css("background", "#456545"); 
 
}); 
 
$("#squareID").mouseout(function() { 
 
    $(this).css("background", "#9ACD32"); 
 
});

.square { 
 
    width: 300px; 
 
    height: 150px; 
 
    background: #9acd32; 
 
    margin: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="squareID" class="square"></div>

아래로.