basti1012.bplaced.net

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.

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>