Wie ändert man die Farbe des Rechteckteils per Mausklick in HTML, JS?

Question

Aufgabe: Wenn Sie den Mauszeiger über einen Teil des Rechtecks ​​bewegen, ändert sich die Farbe des angegebenen Bereichs oder wird durch Anklicken gelöscht.

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

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

Ich verstehe, wie durch Klicken mit der Maus in js den ganzen Hintergrund zu ändern, aber ich weiß nicht, wie dies von dieser Figur auf einen bestimmten Abschnitt zu tun. Der Bereich mit variabler Farbe der quadratischen Form, Höhe und Breite kann geändert werden.

Wie kann dies mit HTML, JS implementiert werden? Welche Methoden sind dafür nötig? oder kann diese Aufgabe nur mit der in Canvasae und seinen Funktionen gezeichneten Figur gelöst werden?

Answer 1

Sie können keinen Abschnitt von <div class="square"></div> ändern, weil er ganz ist.

Aber Sie können andere divs hinzufügen und mit einem Klick können Sie ihren Stil sichtbar zu ändern.

Sie können auch http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Answer 2

, wenn Sie SVG verwenden sollten Sie in der Lage zu tun, dass mit einfacher CSS, so ziemlich alles, was Sie in einem SVG ausrichten können, here an example. Als Beispiel können Sie {SVG Element Selector} verwenden: Hover, um CSS-Attribut mit der Maus über zu ändern, oder nach dem gleichen Konzept können Sie document.querySelector ({SVG-Element-Selektor}) AddEventListener (klicken Sie auf, ...).

Ich glaube nicht, dass Sie es einfach nur mit einfachen HTML

Answer 3

Durch Einfügen von jQuery tun können, das Rechteck seine Farbe auf schweben ändert, und klicken Sie auf, um es entfernt. Hier ist, wie es zu tun:

$("#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>

Weiter unten Ihre Anfrage unmöglich ist, auszuführen, wenn Sie Licht auf die Frage wieder bringen.