HTML und CSS - Box erscheint nach Klick auf Button und verschwindet nach Klick auf Text wieder?
Die Aufgabenstellung lautet:
"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“
Die Box soll beim Klick auf den Text wieder unsichtbar werden.
Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."
Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...
Freue mich über jede Nachricht!
4 Antworten
"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“
-Die bestätigung implementierst du im body bereich
Die Box soll beim Klick auf den Text wieder unsichtbar werden.
-dafür ist javascript gut geeignet
Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."
Durch den :hover-Selektor in CSS ändert die Box ihre Hintergrundfarbe, wenn man mit der Maus darüberfährt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button & Box</title>
<style>
.hidden {
display: none;
}
#infoBox {
border: 1px solid #000;
padding: 20px;
width: 300px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s;
}
#infoBox:hover {
background-color: red;
}
</style>
</head>
<body>
<button onclick="showBox()">Box anzeigen</button>
<div id="infoBox" onclick="hideBox()" class="hidden">
Diese Funktion ist noch nicht implementiert. Bitte schließen.
</div>
<script>
function showBox() {
document.getElementById('infoBox').style.display = 'block';
}
function hideBox() {
document.getElementById('infoBox').style.display = 'none';
}
</script>
</body>
</html>
das ist ein recht simpler aber gut funktionierender code
die farbe kannst du beliebig ändern, habe jetzt rot genommen, du musst nur den farbcode im css bereich ändern:
#infoBox:hover {
background-color: red;
}
Muss diese Box ausschließlich mit HTML und CSS umgesetzt werden oder darfst du auch JavaScript einsetzen? Wenn ersteres der Fall sein sollte, wäre der „Checkbox Hack” eine Möglichkeit, um die Sichtbarkeit der der Box zu steuern.
HTML:
<input type="checkbox" id="toggle">
<label for="toggle">Text anzeigen</label>
<div class="dialog">
<label for="toggle"></label>
<h3>Info</h3>
<p>Hier steht ein Infotext...</p>
</div>
CSS:
#toggle,
.dialog {
display: none;
}
.dialog {
padding: .5em 1em;
position: relative;
}
.dialog label {
position: absolute;
inset: 0;
}
#toggle:checked ~ .dialog {
display: block;
}
Falls du JavaScript einsetzen darfst, reicht es der Einfachheit halber schon aus, wenn du lediglich mit einem EventListener auf die Klicks reagierst und so eine Klasse zu einem Element hinzufügst oder entfernst. Die Sichtbarkeit steuerst du dann einfach im CSS, in dem du die display Eigenschaft änderst.
HTML:
<button class="button">Text anzeigen...</button>
<div class="dialog">
<h3>Info:</h3>
<p>Hier steht ein Infotext...</p>
</div>
JavaScript:
const button = document.querySelector('.button');
const dialog = document.querySelector('.dialog');
button.addEventListener('click', () => {
dialog.classList.toggle('active');
});
dialog.addEventListener('click', () => {
dialog.classList.remove('active');
});
CSS:
.dialog {
display: none;
}
.dialog.active {
display: block;
}
Der Text muss dann halt auch ein Event haben?!
Siehe https://jsfiddle.net/6gsmeoua/
Maximale Erfolge!
PS: wenn es beim laden nicht sichtbar sein soll, musst du es zuerst auf visibility: hidden setzen im CSS
Du brauchst hier ja Javascript, zum verstecken bzw. anzeigen kannst du ja mit einer CSS-Klasse arbeiten, die du hinzufügst bzw. entfernst, wenn du auf den Button klickst. Du kannst ja mithilfe von Javascript überprüfen, ob die Klasse an der Box ist oder nicht, und du fügst sie dann hinzu falls sie fehlt und entfernst sie, falls sie da ist.
Die Farbäderung geht mit einer CSS-Anweisung und :hover
Dankeschön Kid!
Ja hab mich schon daran versucht und im Netz gesucht.... schaffe es schon Text (den ich dann ja durch eine Box ersetzen könnte) ein und auszublenden, aber nicht, dass zuerst kein Text da steht und dieser erst beim Klick auf den Button erscheint und durch einen Klick irgendwo im Text wieder weg geht.
Hab auch schon gelernt wie man Text einblendet, der dann stehen bleibt und sooft eingefügt wird so oft wie man auf den Button klickt, aber nicht:
Beim Öffnen der Seite nicht da/nicht sichtbar/ausgeblendet/hidden.
Beim Klicken auf Button da/erscheint Text/visible.
Beim Klicken in den Text wieder ausgeblendet/hidden.
HTML
<div id="menu">
<p>Hier kommt dann die Box hin!</p>
</div>
<script type="text/javascript">
function toggleVisibility(menu) {
obj = document.getElementById(menu);
obj.style.visibility = obj.style.visibility == 'hidden' ? 'visible' : 'hidden';
}
</script>
<a href="javascript:void(0);" onclick="toggleVisibility('menu');">einblenden / ausblenden</a>
CSS
#menu {
visibility: hidden;
z-index: 100;
position: absolute;
height: 200px;
width: 200px;
left: 50%;
margin-left: -100px;
top: 300px;
background-color: #000000;
border-style: dotted;
border: #c48430;
}
#menu:hover {
visibility: visible;
z-index: 100;
position: absolute;
height: 200px;
width: 200px;
left: 50%;
margin-left: -100px;
top: 300px;
background-color: #red;
}
Super! 1.000 Dank! Genial!