CSS Hover div1.img1 auf einem anderen div2.img2 schweben

CSS beeinflussen div1.img1 auf einem anderen beeinflussen div2.img2CSS Hover div1.img1 auf einem anderen div2.img2 schweben

.img1:hover + .i1 { 
 
    display: none 
 
}

<article> 
 

 
    <div class="bigimg"> 
 
    <img id="hauptimg" class="i4" style="position: absolute" src="imgs/k2.jpg" width="394px" height="309px"> 
 
    <img id="hauptimg" class="i3" style="position: absolute" src="imgs/k1.jpg" width="394px" height="309px"> 
 
    <img id="hauptimg" class="i2" style="position: absolute" src="imgs/big.jpg" width="394px" height="309px"> 
 
    <img id="hauptimg" class="i1" style="position: absolute" src="imgs/big2.jpg" width="394px" height="309px"> 
 
    <div class="clear"></div> 
 
    </div> 
 
    <div class="smallimg"> 
 
    <img id="secondimg" class="img1" src="http://www.bilder-upload.eu/upload/5f6a5a-1467583787.jpg" width="100px" height="100px"> 
 
    <br> 
 
    <img id="secondimg" class="img2" src="http://www.bilder-upload.eu/upload/fd6130-1467583927.jpg" width="100px" height="100px"> 
 
    <br> 
 
    <img id="secondimg" class="img3" src="http://www.bilder-upload.eu/upload/a2888b-1467583968.jpg" width="100px" height="100px"> 
 
    </div> 
 

 
</article>

mit +, >, ~ funktioniert nicht

Quelle

2016-07-04 lassaad

Sie können keine doppelten IDs haben, verwenden secondimg und hauptimg als Klassen und i mg1 .../i1 ... als IDs – Li357

Das ist mit CSS nicht möglich. Die zwei Elemente sind in völlig getrennten Elternteilen. Unter https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators erfahren Sie, was Sie mit Beziehungskombinatoren in CSS tun können. – BurningLights

.img1: Hover + .i1 bedeutet, dass .l1 ist das nächste Geschwister von .img1, In dir Markup das nächste Geschwister ist ein
... –

Ihr Code hat ein paar Fehler:

Sie NICHT dupliziert haben IDs, sie MUST eindeutig sein.
sollten Sie keine Inline-Stile haben.
sollten Sie nicht width/height HTML-Tags verwenden, stattdessen CSS-Stile dafür verwenden.

Und dies Ihr aktuelles Layout in Ihrem Bild gezeigt (gegeben zu arbeiten, müssen Sie JS verwenden, da CSS keinen übergeordneten Selektor hat.

Sie Ihr Layout Flexbox mit erreichen können.

$(".thumbs img").hover(function() { 
 
    var src = $(this).attr("src"); 
 
    $("#hauptimg").attr("src", src); 
 
});

article { 
 
    display: flex; 
 
    position: relative; 
 
    width: 500px 
 
} 
 
.thumbs { 
 
    display: flex; 
 
    flex-direction: column; 
 
    position: absolute; 
 
    right: 0 
 
} 
 
.thumbs img { 
 
    width: 100px; 
 
    margin: 0 10px 
 
} 
 
.preview img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px red solid 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article> 
 
    <div class="preview"> 
 
    <img id="hauptimg" src="//www.bilder-upload.eu/upload/5f6a5a-1467583787.jpg" /> 
 
    </div> 
 
    <div class="thumbs"> 
 
    <img id="secondimg1" class="img1" src="http://www.bilder-upload.eu/upload/5f6a5a-1467583787.jpg"> 
 
    <img id="secondimg2" class="img2" src="http://www.bilder-upload.eu/upload/fd6130-1467583927.jpg"> 
 
    <img id="secondimg2" class="img3" src="http://www.bilder-upload.eu/upload/a2888b-1467583968.jpg"> 
 
    </div> 
 
</article>

Quelle

2016-07-04 14:42:22 dippas

nur css bitte, JS funktioniert nicht in ebay. – lassaad

dann kann man das mit diesem Layout nicht mit reinem CSS erreichen, mit einem anderen Layout ja. – dippas

CSS Hover div1.img1 auf einem anderen div2.img2 schweben

Antwort

Verwandte Themen