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...
https://jsfiddle.net/taxishop/10m8vttm/
Danke im Voraus...
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>
Danke im Voraus...
Kommentar