[HTML] Hover entfernen?
https://jsfiddle.net/e8hboktq/
Wie kann ich das dropdown vom hover deaktivieren und ändern, das es nur noch geht, wenn man auf den button drückt und nicht hovert
4 Antworten
![](https://images.gutefrage.net/media/user/Limearts/1444747903_nmmslarge.jpg?v=1444747903000)
Rein mittels CSS gelöst wäre die Möglichkeit den Zustand :hover in :active umzuschreiben. Dies hat jedoch zur Folge dass das Menü nur so lange einblendet, wie man die Taste auch gedrückt hält.
Für ein on-click Dropdown-Menü ist Javascript erforderlich. zB mittels diesem Beispiel, das on-click nutzt um die Klasse des Elements entsprechend zu verändern. https://www.geeksforgeeks.org/change-an-element-class-javascript/
![](https://images.gutefrage.net/media/default/user/9_nmmslarge.png?v=1551279448000)
Das sieht mir nach einem Teil von Bootstrap aus. Nutzt Du Bootstrap?
![](https://images.gutefrage.net/media/user/flumex/1595422229394_nmmslarge__53_53_393_393_c56a4e889a73c04eefac88b09f63e6ee.png?v=1595422229000)
Deine Vorstellung ist mit Hilfe von CSS nicht umsetzbar. Dafür musst Du mit JS ran:
![](https://images.gutefrage.net/media/user/flumex/1595422229394_nmmslarge__53_53_393_393_c56a4e889a73c04eefac88b09f63e6ee.png?v=1595422229000)
![](https://images.gutefrage.net/media/user/uefuw/1593248788431_nmmslarge__405_0_1080_1080_fa00e71742556a7c064ca3c46e56f3fa.jpg?v=1593248788000)
In CSS nach #hover suchen und einfach entfernen
![](https://images.gutefrage.net/media/default/user/10_nmmslarge.png?v=1551279448000)
![](https://images.gutefrage.net/media/user/uefuw/1593248788431_nmmslarge__405_0_1080_1080_fa00e71742556a7c064ca3c46e56f3fa.jpg?v=1593248788000)
![](https://images.gutefrage.net/media/default/user/10_nmmslarge.png?v=1551279448000)
Das speicher mal den code und sende ihn mir bitte.
![](https://images.gutefrage.net/media/user/uefuw/1593248788431_nmmslarge__405_0_1080_1080_fa00e71742556a7c064ca3c46e56f3fa.jpg?v=1593248788000)
![](https://images.gutefrage.net/media/user/uefuw/1593248788431_nmmslarge__405_0_1080_1080_fa00e71742556a7c064ca3c46e56f3fa.jpg?v=1593248788000)
![](https://images.gutefrage.net/media/default/user/10_nmmslarge.png?v=1551279448000)
![](https://images.gutefrage.net/media/user/uefuw/1593248788431_nmmslarge__405_0_1080_1080_fa00e71742556a7c064ca3c46e56f3fa.jpg?v=1593248788000)
Ok aber Versuch mal bei CSS hover erst zu kopieren dann zu entfernen das ging immer bei mir
![](https://images.gutefrage.net/media/default/user/10_nmmslarge.png?v=1551279448000)
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: grey;
}
.dropdown:hover .dropdown-content {
display: block;
}
![](https://images.gutefrage.net/media/default/user/10_nmmslarge.png?v=1551279448000)
Das ist der Code. Wenn ich das
.dropdown:hover .dropdown-content {
display: block;
}
entferne geht es nicht mehr
![](https://images.gutefrage.net/media/user/uefuw/1593248788431_nmmslarge__405_0_1080_1080_fa00e71742556a7c064ca3c46e56f3fa.jpg?v=1593248788000)
![](https://images.gutefrage.net/media/user/uefuw/1593248788431_nmmslarge__405_0_1080_1080_fa00e71742556a7c064ca3c46e56f3fa.jpg?v=1593248788000)
Das war eigentlich bei mir immer das da #hover war hab das dsnn entfernt dann ging das
Ich möchte noch ein 2 machen, aber wenn ich das JS kopiere und die Klassen so nenne wie bei Dropdown 1 funktioniert beides nicht. Also wie kriege ich das noch bei dem 2 hin?