Hover eines div soll ein anderes div einblenden

Hallo, ich teste und lerne etwas mit CSS und HTML ... ich möchte bei MouseOver ein DIV einblenden und beim verlassen wieder ausblenden. das ganze soll ein Menü für einen Shop werden.

Der hier verwendete Code

<style> .elements { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; align-content: center; } /* default not displayed */ .subMainCat, .lv2SubMainCat { display: none; } .element { background: green; text-align: center; width: 150px; margin-bottom: 10px; margin-left: 10px; opacity: 1; } .sub .current .element { height: 100px; } #p28:hover + div + div + div + .lv2SubMainCat { display: block; } /* oder so #p28:hover ~ .lv2SubMainCat { display: block; } */ .element img { width: 90px; height: 60px; } .element:hover img { filter: grayscale(1) invert(100%); background: red; } </style> <div id="p28" style="background:red" class="element"> <p> hover me </p> </div> <div class="mainCat"> <div class="elements"> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> </div> </div> <div class="subMainCat"> <div class="elements"> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> </div> </div> <div class="lv2MainCat"> <div class="elements"> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <p> Text 1 </p> </div> </a> </div> </div> <div class="lv2SubMainCat"> <div class="elements"> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 122 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> <a href="demo"> <div class="element"> <img border="1" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100"> <p> Text 1 </p> </div> </a> </div> </div> <script> function openForm() { document.getElementById("myForm").style.display = "block"; } function closeForm() { document.getElementById("myForm").style.display = "none"; } </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!