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.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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 */
img {
display: none;
width: 90px;
height: 60px;
border;10px solid black;
}
.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 > a > div img {
display: block;
}
.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="lv2SubMainCat">
<div class="elements">
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/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="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 2
</p>
</div>
</a>
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 3
</p>
</div>
</a>
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 4
</p>
</div>
</a>
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 5
</p>
</div>
</a>
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 6
</p>
</div>
</a>
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 7
</p>
</div>
</a>
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 8
</p>
</div>
</a>
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 9
</p>
</div>
</a>
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 10
</p>
</div>
</a>
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 11
</p>
</div>
</a>
<a href="demo">
<div class="element">
<img border="1" alt="W3Schools" src="/image/logo_w3s.gif" width="100" height="100">
<p>
Text 12
</p>
</div>
</a>
</div>
</div>