✔ Mouseover in Mouseover

Q

querytail

Erfahrenes Mitglied
Hallo,

kann man mit jQuery 2 Mouseover ineinander legen? Also zunächst soll das erste Div aufklappen und wenn ich auf dieses Div gehe, soll sich wieder etwas öffnen.

Wenn es da ein Tut gäbe, wäre mir schon sehr geholfen.

Danke

querytail
 
Hi,

Tutorial wüsste ich jetzt keins, aber das ist eigentlich auch nicht besonders schwer.
Hier mal nen kleines Demo:
click
HTML: 
<div id="first">
    1st
</div>
<!-- zuerst unsichtbar -->
<div id="secound" style="display: none;">
    2nd
</div>
<!-- zuerst unsichtbar -->
<div id="third" style="display: none;">
    3rd
</div>?????????
Javascript: 
// first deckt bei mouseover secound auf
$('#first').mouseover(function() {
  $('#secound').css('display', 'block');
});
// secound deckt bei mouseover third auf
$('#secound').mouseover(function() {
  $('#third').css('display', 'block');
});
CSS: 
/* nur zur verschönerung */
div{
    background-color: #E5E5E5;    
    padding: 5px;
    margin: 15px;
    border: solid 3px orange;
    color: purple;
    font-weight: bold;
    font-family: Arial;
}
 
Zuletzt bearbeitet von einem Moderator:
Hallo und danke,

wenn ich das mal einfüge, geht das leider nicht. Was mache ich falsch?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
/* nur zur verschönerung */
div{
    background-color: #E5E5E5;    
    padding: 5px;
    margin: 15px;
    border: solid 3px orange;
    color: purple;
    font-weight: bold;
    font-family: Arial;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// first deckt bei mouseover secound auf
$('#first').mouseover(function() {
  $('#secound').css('display', 'block');
});
// secound deckt bei mouseover third auf
$('#secound').mouseover(function() {
  $('#third').css('display', 'block');
});
</script>
</head>

<body>
<div id="first">
    1st
</div>
<!-- zuerst unsichtbar -->
<div id="secound" style="display: none;">
    2nd
</div>
<!-- zuerst unsichtbar -->
<div id="third" style="display: none;">
    3rd
</div>
</body>
</html>
 
Ihr habt hier beide im geposteten jQuery-Script $(document).ready() unterschlagen ;)

Javascript: 
$(document).ready(function() {
  // first deckt bei mouseover secound auf
  $('#first').mouseover(function() {
    $('#secound').css('display', 'block');
  });
  // secound deckt bei mouseover third auf
  $('#secound').mouseover(function() {
    $('#third').css('display', 'block');
  });
});

Für das funktionstüchtige jsFiddle-Demo wurde hingegen von "jD" im linken Auswahlmenü der onload-Event gewählt.

Und nur am Rande zur Fortbildung erwähnt, secound im Sinne von 2nd wird ohne u geschrieben ;-)
 
Zuletzt bearbeitet:
Aaaah, das geht schon einmal. Dankeschön.

Wie kann ich denn jetzt ein Zusammenspiel mit mouseout erreichen, dass es quasi als Menu nutzbar ist?

Ein einfaches Mouseout reicht ja hier nicht.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
/* nur zur verschönerung */
div{
    background-color: #E5E5E5;    
    padding: 5px;
    margin: 15px;
    border: solid 3px orange;
    color: purple;
    font-weight: bold;
    font-family: Arial;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mouseover</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // first deckt bei mouseover secound auf
  $('#first').mouseover(function() {
    $('#secound').css('display', 'block');
  });
  // secound deckt bei mouseover third auf
  $('#secound').mouseover(function() {
    $('#third').css('display', 'block');
  });
  
  $('#secound').mouseout(function() {
    $('#third').css('display', 'none');
  });
  
  
});
</script>
</head>

<body>
<div id="first">
    1st
</div>
<!-- zuerst unsichtbar -->
<div id="secound" style="display: none;">
    2nd
</div>
<!-- zuerst unsichtbar -->
<div id="third" style="display: none;">
    3rd
</div>
</body>
</html>
 
Ja, das ist es schon fast. Auf der 2. Ebene sollen mehrere Möglichkeiten (divs) zu öffnen sein, die dann wiederum divs gezielt öffnen können.
 
horizontal oder vertikal nebeneinander (wie in Anhang1 oder Anhang2) ? ?
 

Anhänge

  • Unbenannt.png
    Unbenannt.png
    369 Bytes · Aufrufe: 5
  • Unbenannt2.png
    Unbenannt2.png
    354 Bytes · Aufrufe: 1
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück