[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

Limearts

14.07.2020, 08:12

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/

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

14.07.2020, 07:23

Das sieht mir nach einem Teil von Bootstrap aus. Nutzt Du Bootstrap?

Woher ich das weiß:Berufserfahrung – mit dem Internet verbunden seit 1993

flumex

14.07.2020, 08:35

Deine Vorstellung ist mit Hilfe von CSS nicht umsetzbar. Dafür musst Du mit JS ran:

https://jsfiddle.net/y1m7rcg5/

Noxxxxxxxx

Fragesteller

15.07.2020, 02:58

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?

flumex

15.07.2020, 09:09

@Noxxxxxxxx

https://jsfiddle.net/oLurbyvq/

uefuw

14.07.2020, 04:51

In CSS nach #hover suchen und einfach entfernen

Noxxxxxxxx

Fragesteller

14.07.2020, 04:52

Nein so geht es nicht.

uefuw

14.07.2020, 04:52

@Noxxxxxxxx

Bei mir ging das

Noxxxxxxxx

Fragesteller

14.07.2020, 04:53

@uefuw

Das speicher mal den code und sende ihn mir bitte.

uefuw

14.07.2020, 04:54

@Noxxxxxxxx

Ich versuche es aber beim Handy sieht das komisch aus

uefuw

14.07.2020, 04:56

@Noxxxxxxxx

Wie macht man beim Handy CSS größer bei der Seite

Noxxxxxxxx

Fragesteller

14.07.2020, 04:56

@uefuw

Am Handy geht das glaube ich nicht

uefuw

14.07.2020, 04:58

@Noxxxxxxxx

Ok aber Versuch mal bei CSS hover erst zu kopieren dann zu entfernen das ging immer bei mir

Noxxxxxxxx

Fragesteller

14.07.2020, 04:58

@uefuw

.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;
}

Noxxxxxxxx

Fragesteller

14.07.2020, 04:59

@Noxxxxxxxx

Das ist der Code. Wenn ich das

.dropdown:hover .dropdown-content {
 display: block;
}

entferne geht es nicht mehr

uefuw

14.07.2020, 05:00

@Noxxxxxxxx

Versuch einfsch mal alles wo hover steht zu entfernen

uefuw

14.07.2020, 05:01

@Noxxxxxxxx

Das war eigentlich bei mir immer das da #hover war hab das dsnn entfernt dann ging das

Hallo, Ich bin grade dabei ein Portfolio zu Programmieren und habe Probleme damit Hover Effekte zu erstellen. Meine Frage ist wie kann man bei HTML einen Hover Effekt für Bilder erstellen so dass wenn man über das Bild hovert das der Text zum Vorscheinen kommt.?

So wie auf dieser Seite: http://themes.pixelwars.org/responsy-wp/portfolio/#prettyPhoto

Vielen dank schon mal im voraus. LG. Lacadio

...zur Frage

Hintergrundfarbe durch Hover ändern (HTML)?

Hallo Community,

ich möchte, das sich beim "hover" auf einen Button die Hintergrundfarbe sich in Rot verändert verändert. Wie kann ich das realisieren? Betroffen ist der Button ".BtnNin" (siehe Bild).

Danke :)

...zur Frage

HTML Button bleibt an der gleichen Stelle bei Hover?

Hallo, ich würde gerne meine Website so machen, dass wenn man über einen Button hovert, dieser größer wird. Das klappt auch. Das Ding ist, der Footer verschiebt sich auch ( ist ja klar, weil ich ihm nen Margin top gegben habe. Wie mache ich es, dass der Footer sich nicht mit bewegt, sondern nur die Buttons ?

Danke im Voraus

...zur Frage

HTML Button kann nicht gedrückt werdenn?

Hallo.

Ich versuche nach einer Idee von einem Freund einen Webshop zu machen.

Zu mindestens das Design.. Geht auch alles außer das ich den Button nicht drücken kann. Der Hover funktioniert aber.

Ich habe den Sourcecode bisschen gekürzt.

https://pastebin.com/mPF8BCnn

MFG

...zur Frage

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zur Frage

Warum funktioniert mein Dropdown Menü nicht?

Hallo könnte sich bitte einmal jemand meinem Code ansehen?
Wenn ich über den Menü Punkt Hover wird das Untermenü nicht angezeigt.
Ebenso wenn ich in der mobile Version auf das Hamburger Icon klicke
Ich finde den Fehler einfach nicht.

Link zum Code https://codepen.io/Bastian_code21/pen/YzKooXY

Danke schonmal!

...zur Frage

Variable in HTML Formular Dropdown übergeben?

Hallo zusammen,

ich möchte ein HTML Formular mit einem Dropdown Menü erstellen, wo man mit einer Text Eingabe eine Auswahlmöglichkeit zum Drop Down Menü hinzufügen können soll.

Also Bsp.: Ich habe eine Auswahl von 3 Optionen im DropDown, dann gibt der User in ein eingabe Feld eine weitere Option ein, drückt submit und hat dann 4 Optionen zur Auswahl, eine davon von ihm selbst.

Hoffe ihr könnt mir weiterhelfen:)

...zur Frage

HTML / CSS: Mein div wird oben abgeschnitten?

https://jsfiddle.net/qkw45jne/1/

Wenn der Bildschirm zu klein wird (in der Höhe), wird das rote div oben teilweise abgeschnitten. Scrollbars kommen aber trotzdem, da die teile drunter vollständig zu sehen bleiben.

Was muss ich ändern, dass auch das rote div immer vollständig da bleibt?

In dem jsfiddle könnt ihr das recht einfach nachstellen, indem ihr die mittlere grenze hoch schiebt. Dann wird irgendwann auch der text im roten div sichtbar:

...zur Frage

JavaScript: Wieso funktioniert mein Dropdownbutton nicht?

Der Dropdownbutton funktioniert nicht, obwohl Bootstrap verlinkt wurde. Was könnte der Grund sein?

HTML:

  <div class="col-sm-4 col-md-4 " onclick="sortFunction()" style="color: white;text-align: right;">
    <div class="dropdown">
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:white;">Sort By</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" onclick="mostLikedSortFunction()" href="#">Most Liked</a>
        <a class="dropdown-item" onclick="mostLikedSortFunction()" href="#">Least Liked</a>
      </div>
    </div>
  </div>
</div>

JavaScript:

function mostLikedSortFunction() {
  movies.sort(function(a, b){return b.num_of_likes - a.num_of_likes});
  CreateMoviesFromJson();
}

function leastLikedsortFunction() {
  movies.sort(function(a, b){return a.num_of_likes - b.num_of_likes});
  CreateMoviesFromJson();
}

...zur Frage

HTML einer zeile text einen platz geben?

hallo ich schaffe es nicht bei meinem sidebarmenu ein dropdown menu einzubauen ohne das der text der dahinterkommt in den dropdown button hineinglitcht.

kann mir irgendwer sagen wie man dem button einen festen platz gibt

...zur Frage

Javascript (jQuery) / HTML Button mehrmals verwenden?

Hey, ich habe euch hier gleich mal ein JsFiddle verlinkt damit ihr mein Problem besser verstehen könnt: https://jsfiddle.net/Johnny3_3/dqqrvm6q/

Wenn ihr auf den Start Button klickt, dann wird durch Javascript (jQuery) der Kreis sichtbar gemacht. Allerdings kann ich durch das erneute klicken auf den Button den Kreis nicht verschwinden und danach nochmal sichtbar machen lassen. Sprich ich will unendlich oft auf den Button klicken können und somit den Kreis sichtbar und unsichtbar machen.

...zur Frage

Bilder auf der HTML/ CSS Seite nur zur hälfte sichtbar?

Hey,

die Bilder im slider unten auf der Webseite sind leider nur zur hälfte zu sehen. Weiß jemand woran das liegt ? danke

https://jsfiddle.net/vk9wqys0/1/

...zur Frage

HTML / CSS Wieso lässt sich mein Text nicht zentrieren?

Hier der Code: https://jsfiddle.net/JetztMitte/mL1t3hwn/1/

...zur Frage

Wie kann ich bei HTML / CSS einen Hover Effekt entfernen. Der Effekt soll bei der Responsive-Seite gelöscht werden.?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen