Ankündigung

Einklappen
Keine Ankündigung bisher.

hover over button ändert/zoomt background nicht...

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • hover over button ändert/zoomt background nicht...

    Hallo, ich möche ein button einbauen, der bei hover den Hintergrund des "parents" ändert, das scheint aber nicht ganz zu funktionieren...
    im Beispiel1 funktioniert alles, im Beispiel2 aber nicht...wie kann ich das lösen?
    es wäre besse nur mit css, aber soweit ich weiss, gibt es keine parent-selektoren bei css...

    HTML-Code:
    <!doctype html>
    <html>
        <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style>
    .image1 {
        height: 200px;
        width: 200px;
        background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
        background-size: 100% 100%;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        transition: all .5s;
        background-position: center center;
    }
    .button {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .button:hover ~ .image1{
        background-size: 150% 150%;
        color: white;
    }
    </style>
        </head>
    
        <body>
        Beispiel1
    <div class="button">more</div>
    <div class="image1"></div>
    
    <br><br>
    Beispiel2 - jetzt funktioniert der Button nicht mehr
    <div class="image1"><div class="button">more</div></div>
    
    </body>
    </html>
    https://jsfiddle.net/taxishop/10m8vttm/

    Danke im Voraus...


  • #2
    Mit reinem CSS ist es nicht möglich, da es nur auf gleicher Ebene(Sibling) oder darunter(Child) angewandt werden kann.

    Kommentar


    • #3
      setze doch die beiden elemente übereinander:
      HTML-Code:
      <div>
      Beispiel1
      <div class="button">more</div>
      <div class="image1"></div>
      <br><br>
      Beispiel2
      </div>
      Code:
      .image1 {
        position: absolute;
        top: 0px;
        z-index: -2;
          height: 200px;
          width: 200px;
          background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
          background-size: 100% 100%;
          -moz-transition: all .5s;
          -webkit-transition: all .5s;
          transition: all .5s;
          background-position: center center;
      }
      .button {
          width: 100px;
          height: 100px;
          background-color: red;
      }
      .button:hover ~ .image1{
          background-size: 150% 150%;
          color: white;
      }
      sorry meine dose kommt mit fiddles nicht zurecht

      Kommentar

      Lädt...
      X