Frage von silverrose90

03.07.2014, 20:57 , 32

Für jeden Link extra Sound bei hover (HTML / CSS)

Hallo,

ich habe eine Tagcloud entwickelt und wollte nun, dass bei jedem Link ein anderer Sound ertönt, wenn man über die Links mit der Maus fährt (hover). Im Endeffekt soll es sich so anhören, als würde ein Windspiel ertönen, wenn man mit der Maus von oben nach unten rüber geht.

Weiß jemand wie das machbar ist? Am besten ohne Javascript? Denn damit kenn ich mich leider noch nicht wirklich aus :(

Danke in Vorraus!!! :)

...komplette Frage anzeigen

2 Antworten

Antwort von

Hilfreichste Antwort von Broco

04.07.2014, 10:17 , 32

Interaktiv geht das leider nur mit Javascript, aber da gibts viele Tutorials für, zum Beispiel hier:

http://css-tricks.com/play-sound-on-hover/

Beschäftige dich ruhig mal mit JavaScript, wenn du es noch nicht kannst, damit kann man echt geile Sachen machen (such mal bei Google nach jquery-ui und AngularJS).

0 Kommentare 0

Antwort von PerfectMuffin

04.07.2014, 06:04 , 26

Interaktive Inhalte mit JS oder vielleicht HTML5. Flash geht auch, wäre aber unüblich, Java ginge auch, wäre aber Verdachtserregend unüblich.

Und Java IST NICHT JavaScript.

0 Kommentare 0

Ähnliche Fragen

Frage von Frager2111

31.10.2016, 08:47

CSS Element nach hover weiterhin anzeigen?

Hallo liebe Community, ich habe eine Frage zur CSS-Programmierung. Hier erstmal mein aktueller Code:

#element1{
    display: none;
}
#element2:hover~#element1{
    display: block;
}

Zum Verständnis: Ich habe zwei Elemente auf der Website. Wenn man mit der Maus über element2 drüber geht, wird element1 angezeigt. "Verlässt" man nun element2, so verschwindet element1 auch wieder. Logisch, oder? :-)

Jetzt wäre meine Frage: Wie muss der Code aussehen, damit element1 (welches bei einem hover von element2 dargestellt wird) nach dem Hover für immer anzeigt wird und nicht wieder verschwindet.

Viele Grüße, Frager2111

4 Antworten

Frage von ApplePvPYT

01.10.2017, 14:13

CSS sidebar hover effect geht nicht?

Jo ich habe eine Frage.. und zwar warum klappt das nicht:

body{ background: #1ABC9C; transition: background 300ms ease-in-out; }

nav ul:hover body{ background: #54acd2; }

wenn ich über diese liste fahre mit der maus soll sich der Hintergrund von meiner Website ändern..

Danke für alle Antowrten. lg

2 Antworten

Frage von Oppis

24.10.2012, 09:12

CSS: Hover einbinden

Hallo Leute ich möchte das wenn ich bei meiner webseite mit der Maus über einen link gehe, der link rot wird, wie macht man das?

1 Antwort

Frage von abbrechen

14.09.2016, 13:20

hover Animation nicht abbrechen lassen?

Hi,

ich möchte gerne, dass meine hover Animation nicht abgebrochen wird, wenn der hover Status verloren geht. Aktuell ist es also so, dass wenn die Animation nicht fertig ist und ich den hover durch Wegziehen des Mauszeigers vorzeitig beende, die Animation abrupt abbricht.

Ich habe mal ein pen vorbereitet, um es zu verdeutlichen: http://codepen.io/anon/pen/QKNwpR

Eine reine css-Lösung wäre natürlich klasse, JavaScript oder bzw. jQuery wären aber auch wunderbar.

2 Antworten

Frage von Marco893

30.09.2017, 16:51

Wie mit Javascript bei mouseover eine div-Box oder ein Bild einfügen?

Hey Leute, ich möchte, dass wenn man über einen bestimmten Punkt auf der Webseite mit der Maus wischt, dass von oben über die ganze Webseite bis zur Hälfte eine div-Box bildet,(die aber nicht direkt erscheint, sondern langsam runterfährt), die dann zb informationen über den Punkt hat. Habe hier (im Code) versucht, nur als Ansatz den Text aus dem Element mit der ID="Feld" umzuändern, welches aber schon nicht funktioniert ?

var Ausfuhr = document.getElementById('Feld');

Ausfuhr.addEventListener('mouseover', mouseOver)

function mouseOver(){ Ausfuhr.innerHTML="Neuer Text";}

Warum funktioniert das Beispiel nicht, und wie kann man eine ganze Div-Box bei mouseover (wie oben beschrieben) einfügen? Möchte den größtmöglichen Teil nur über Java machen, dass so etwas auch mit CSS einfacher geht weis ich.

2 Antworten

Frage von GamingFreund

11.10.2015, 00:27

Wie kann ich verhindern, dass der hover-Effekt in CSS bleibt?

Hallo, ich habe eine Webseite erstellt, bzw. bin noch dabei. Es ist ein OnePage-Design mit einer oben fixierten, horizontalen Menüleiste. Soweit funktioniert auch alles. Wenn man einen Menüpunkt anklickt, scrollt er smooth dorthin. Wenn man manuell scrollt, wechselt er dynamisch im Menü den aktiven Punkt je nach Position.

Aus irgendeinem Grund bleibt aber der hover-Effekt der Menüpunkte nach dem anklicken bestehen. Erst wenn man an einer anderen Stelle klickt, verschwindet der Effekt wieder. Hover bedeutet aber eigentlich "ändere, wenn die Maus drüber ist". Was ist jetzt der Fehler und wie kann ich das ganze beheben?

Da ich irgendwie keinen Code in diese Codebox kopieren kann, findet Ihr den Code auf den Bildern.

Danke schon mal im Voraus!

Edit:

Ich habe inzwischen herausgefunden, woran es liegt. In der Smooth-Scroll JavaScript Datei wird am Ende der Befehl "return false;" ausgegeben. Wenn ich diesen entferne, bleibt auch der hover-Effekt nicht mehr.

Gleichzeitig entsteht aber auch ein neues Problem, welches mir persönlich noch weniger gefällt. Ohne "return false;" wird beim klicken auf einen der Menüpunkte am Ende der URL ein # mit der entsprechenden Zahl angefügt.

Gibt es eine Lösung, die ohne "return false;" den # weglässt?

1 Antwort

Frage von swobocop

04.11.2015, 01:20

Wie kann ich über einen :hover mit Html5 css und javascript einen ton abspielen?

Hallo Leute, ich bastel seit kurzem an einer kleinen Homepage und möchte bei der auslösung eines hovers (sobald der zeiger auf ein bestimmtest element zeigt) ein ton abspielen lassen.. Ich suche bereits seit 2 tagen nach einer lösung, jedoch vergeblich... ich habe sehr gute erklärungen gefunden jedoch kommt bei mir eine fehler meldung sobald ich folgendes eingebe: und zwar wird das source rot unterstrichen... ich weiß jedoch nicht wieso und bei allem lösungen die ich gefunden habe finde ich fast immer die gleiche lösung... ich arbeite mit dem editor NetBeans... die seite besteht der zeit aus Html5 und css... javascript wird auch kommen sobald ich eine lösung für das problem gefunden habe...

vllt findet sich jemand der sich gut auskennt und mir evtl. ein guten beispiel für die lösung zeigen kann ....

danke schon mal :)

2 Antworten

Frage von juli1303

29.03.2016, 18:43

Hover-Effekt bei einzelnen Wörter im Text?

Hallo, wie kann ich es mit CSS oder HTML so programmieren, dass normale Wörter also keine Links z.B. größer werden beim drüber fahren mit der Maus?

Danke im Vorraus LG Julian

2 Antworten

Frage von Marco893

27.04.2017, 16:04

Wie kann man ein [weiterlesen] mit CSS oder Javascript erzeugen?

Ich möchte, dass mein Text

mit border { solid 3px; } Auf der Webseite nicht ganz angezeigt wird, sondern mit einer Eigenschaft weitergelesen werden kann, wenn der Leser dort drauf klickt. Wie kann ich das machen, also geht das auch vllt anders mit Javascript oder muss ich einen Link oder so einfügen und nochmal eine neue Seite erzeugen ?

2 Antworten

Frage von calgia

16.01.2018, 07:52

Wie kann ich machen, dass ich die im header-tag befindliche Navigation auch anklick bar ist?

Hallo zusa,,em

jsfiddle (HTML&CSS-Code) ist hier: https://jsfiddle.net/gdcalonoder/cu4e64s0/

Wie kann ich jetzt machen, dass die Navigation anklickbar ist, wenn man sich weiter unten im dokument befindet..?

Freundliche Grüsse

calgia

2 Antworten

Frage von Marco893

08.04.2017, 15:19

Menü, welches beim klicken "ausfährt" in Javascript, CSS oder irgendwie anders programmieren?

Hey ich habe letztens ein bestimmtes ganz cooles Menü auf einer Webseite endeckt, indem man nur rechts am Seitenrand einzelne zeichen wie zum Beispiel eine Lupe für Suche und noch andere Sachen untereinander standen. Wenn man dann dort mit der Maus drüber bzw draufgewischt(Weiß nicht wie ich das nennen soll :D) dann ist es quasi ausgefahren und dann stand dort Suche, wo man draufklicken kann. Wisst ihr vielleicht was ich meine :D und wenn ja wie nennt man solche menüs und womit programmiert bzw erstellt man sie ? Also javascript, CSS ... ? Wäre ganz nice wenn ihr mir mal einen Link schicken könntet wo sowas erklärt wird :)

PS Ich habe das Menü in dem Quellcode der Webseite selber einfach nicht gefunden(wegen viel Code etc.) deswegen die Frage LG

2 Antworten

Frage von HamsterKnowHow

11.11.2017, 01:08

Wie die CSS für das Handy schreiben?

Ich bin grad an meiner Webseite und nun versuche ich das ganze Mobile zu optimieren. Klappt auch super, nur hab ich an meiner Webseite ein Drop Down Menü.

Es gibt einen Div namens "info" und darin den zweiten div "content". Fährt man am PC mit der Maus über info, erscheint dadrunter "content":

.info:hover .content { display: block; color: #fff; height: 0px; z-index: 1; position: relative; }

am Handy sieht es auch gut aus und so, nur gibt es da ja kein Hover, sprich das Drop Down klappt nicht. Gibt es etwas anderes anstatt :hover, zB :click oder so, also wenn man auf info klickt, dann zeige content?

1 Antwort

Frage von cba321

17.09.2013, 20:38

Farbübergang mit HTML / Javascript / jQuery / CSS

Hallo,
weiß jemand, ob und wie es möglich ist mit HTML, CSS, JavaScript oder jQuery einen Farbübergang zu fabrizieren?

Wenn ich mit der Maus z.B. auf einen div fahre, soll sozusagen als Hovereffekt der Background des Divs von Schwarz nach weiß gehen.

Danke im Voraus cba321

2 Antworten

Frage von St0ned334

28.12.2017, 18:53

In welcher Programmiersprache wurde das geschrieben?

Hey, Ich habe eine Website gefunden die mich sehr interessiert und wollte wissen in welcher Programmiersprache wurde das geschrieben? Ich hab mal hier für euch den Code der Website.

<html>
<head>
  <title>Spr1ng</title>
  <link rel="stylesheet" type="text/css" href="zlecenie21.css">
  <link rel="stylesheet" href="style/add2home.css">
  <link rel="apple-touch-icon" href="57">
  <link rel="apple-touch-icon" sizes="76x76" href="76.png">
  <link rel="apple-touch-icon" sizes="120x120" href="120.png">
  <link rel="apple-touch-icon" sizes="152x152" href="152.png">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
 
    <meta name="apple-mobile-web-app-title" content="Spr1ng">
 
    <!-- Disable phone number detection. -->
    <meta name="format-detection" content="telephone=no">
  <script type="text/javascript">
  var addToHomeConfig = {
  message: 'To jailbreak your <strong>%device</strong> please add Spr1ng app to homescreen.',
  };
  </script>
     
  <link rel="stylesheet" href="style/add2home.css">
  <script type="application/javascript" src="src/add2home.js" charset="utf-8"></script>
  <script>
  if (window.navigator.standalone == true) {
    window.location.href = http://spr1ng.online/iPhone/1.html
  } else {}
  </script>
</head>
<body>
  <div class="contener2">
  <div class="logo"><img src="logo.jpg" width="130" alt=""></div>
  <div class="center-text_4"><span>Your iDevice is not yet Jailbroken. Click Add to Homescreen and run Spr1ng app. </span></div>
  </div>
  <div class="bottom-text3">By @DevelopApple</div>
</body>
</html>

Ist VIELLEICHT eine dumme Frage ;)

3 Antworten

Was möchtest Du wissen?

Deine Frage stellen

Für jeden Link extra Sound bei hover (HTML / CSS)

2 Antworten

Kann ich mittels CSS oder Javascript den Zoom beim Aufruf einer Website beeinflussen?

html area mit css bearbeiten - schwer zusammenzufassen... bitte lesen :)

Bildwechsel an einer bestimmten stelle im Bild(html/css/javascript)

Wie kann ich ein Bild halb unsichtbar machen und mit hover-Effekt anzeigen lassen?

Wie kann man den Trigger Sound zum Bsp. Schlachtfeld Explosion über die GANZE Arma 3 Map "ertönen" lassen?

Hover effekt mit css funktioniert nicht. warum?