Archiv-Modus von Basti1012 Lösungspage

Und zwar habe ich es bisher nicht geschafft, dass beim hovern über einen Button beispielsweise eine geometrische Form eingeblendet wird. Das einzige, was ich geschafft habe, ist, dass eine Box mit Text auftaucht. Mein Ziel ist es aber, dass beim hovern über einen Button ein Rechteck an einer bestimmten Position auf meiner Website auftaucht.

Code

                                    
                                <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Start Lang Cosmetics</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <style>
    *{
  margin:0;
  padding:0;
}

body ,html{
display: flex;
flex-direction:column;
font-family: "Century Schoolbook L";
color: #993399;
background: whitesmoke;
     background-image:url(/image/wald.jpg);
  min-height:100vh;
  height:100%;
}
#body_footer,
#body_left,
header,
#body_right,
#main_top,
#body_right,
footer
{
  background: rgba(199, 199, 249, 0.95);
font-family: "Century Schoolbook L";
text-align: left;
font-size: 1em;
color: #953195;
  justify-content:space-around;
  margin:10px;
  border:1px solid black;
}


header {
  display:flex;

  max-height:80px;
}
header h1 {
font-size: 2em;
  flex:5;
align-self: center;
  padding:0 10px;
}
#bild1,#bild2{
  flex:1;
}
#bild1 img ,#bild2 img{
width:100%;
}
main{
  display:flex;
    flex-direction:column;


}
#main_top{
  display:flex;
  padding:10px;
  flex:1;
}
#main_body{
  display:flex;
 flex:3;
}
#main_body_2{
  display:flex;
}
#angebot{
  display:flex;
  flex-direction:column;
  flex:5;
}
#Fotoweg{
  flex:2;
}
#Fotoweg img{
  width:100%;
}
#body_left{
  display:flex;
  flex-direction:column;
  flex:2;
  padding:10px;
}
#body_left h2{
  padding:10px;
}
#body_right{
  flex:1;
  padding:10px;
}





ul {
display:flex;
  flex-direction:column;
  padding-left:15px;
}

ul li{

}

#body_footer{
  padding:10px;
text-align:center;
}

footer {
padding:10px;
}



@media all and (max-width:700px) {
  #main_body{
    flex-direction:column;
  }
  #Fotoweg{
    display:none;
  }
  
}
    button{
  height:30px;
  width:200px;
  background:red;
  color:white;
  margin:0 10px;
}

#rechteck{
  position:absolute;
  width:150px;
  height:150px;
  background:blue;
  display:none;
}

#rechteck1{
  position:fixed;
  width:150px;
  height:150px;
  background:green;
  display:none;
}
#rechteck{
  position:absolute;
  width:150px;
  height:150px;
  background:blue;
  display:none;
}


#eins:hover ~ #rechteck{
  display:block;
}
  </style>
</head>
<body>
    <div id="rechteck1"></div>
<header>
  <h1>Herzlich Willkommen bei LANG Cosmetics</h1>
  <button id="eins">Ohne Javascript</button>
  <button id="zwei">Mit Javascript</button>
  <div id="rechteck"></div>
  <div id="bild1"> <img src="/image/logo-die-welt-und-ich-logo.webp">
  </div>
  <div id="bild2">
 <img src="/image/logo-die-welt-und-ich-logo.webp"></div>
</header>

<main>
  <div id="main_top">
<h2>Seit 1976 für unsere Kunden zuverlässig am selben Ort.</h2>
  </div>

<div id="main_body">
  <div id="body_left">
<div id="main_body_2">
  
  <div id="angebot">
 <h2><b>Wir verwöhnen Sie mit Produkten von Maria Galland
und Ayer <br>in entspannter Atmosphäre:</b></h2>   
    
   <ul> 
<li>Maria Galland Beauty Treatments</li>
<li>Gesichtspflege mit Ayer</li>
<li>Maniküre</li>
<li>Medizinische Fußpflege</li>
<li>Fußreflexzonenmassage (System: Hanne Marquardt)</li>
<li>Pediküre, auch mit Lack</li>
<li>Enthaarung / Wachs</li>
<li>Brauenfärben</li>
<li>Wimpernfärben</li></ul>

</div>
  
  
<figure id="Fotoweg">
<img src="/image/Logo_ZDFtivi.svg"
alt="Foto">
</figure>
    </div>

  </div>
<div id="body_right">
<b>Unsere Geschäftszeiten: </b><br>
Mo, Di, Do, Fr: 9 – 18 Uhr <br>
Mi: 9 – 12 Uhr <br>
<br>Und nach Vereinbarung. <br>
<br>
<b>Behandlungen nur <br>nach telefonischer Vereinbarung</b>
<br>
<b>Tel.: 089-932299</b><br>
<br>LANG Cosmetics<br>
81927 München, Ostpreussenstr. 35<br>

</div>
  </div>


<div id="body_footer"><b>Falls Sie gerade verhindert sind persönlich bei uns Ihre gewohnten Produkte einzukaufen, können Sie das hier auch bequem direkt Online machen:</b><br>
<b>Maria Galland:</b> <a href="http://www.mariagalland.com/de_DE/home?INSTid=6021035" id="BG_1596540997012_32169" target="_blank">Maria Galland Online Shop</a>
      <b>Ayer:</b> <a href="https://ayer-cosmetics.com/de/?sPartner=anette-lang" target="_blank">Ayer Online Shop</a></p></div>

</main>

<footer>
<a href="file:/home/hans/Homepage_final/Home_neu_final-Dateien/Impressum_Datenschutz_neu.html" target="_blank">Impressum und Datenschutz</a>
</footer>
<script>
  var von_oben='300px';
var von_links='300px';

var but=document.getElementById('zwei');
but.addEventListener('mouseover',function(){
  var eck=document.getElementById('rechteck1');
  eck.style.display='block';
  eck.style.top=von_oben;
  eck.style.left=von_links;
})
but.addEventListener('mouseout',function(){
  var eck=document.getElementById('rechteck1');
  eck.style.display='none';
  eck.style.top='-200px';
  eck.style.left='-200px';
})



  </script>

</body></html>

basti1012.bplaced.net

Beim Hovern über einen Button ein Rechteck (z.B) einblenden

Code