Ändern Sie die Klasse des anderen Divs, wenn Sie auf einem div schweben

Ich habe vier div s. Wenn ich einen div schweben lasse, werden seine height und width mit Animation zunehmen. Ich möchte etwas wie wenn ich auf einem schweben div seine Größe erhöht und andere 3 div Größen sind abnehmend.Ändern Sie die Klasse des anderen Divs, wenn Sie auf einem div schweben

Ich bin fertig, bis die Größe von div auf Hover Ich verstehe nicht, wie man die Größe aller anderen div s auf einmal ändern.

Hier ist mein HTML und CSS.

.style_prevu_kit { 
 
    display: inline-block; 
 
    border: 0; 
 
    width: 196px; 
 
    height: 210px; 
 
    position: relative; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
    background-color: #00a096; 
 
} 
 
.style_prevu_kit:hover { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1.5); 
 
}

<div align="center"> 
 
    <div style="width:1000px;"> 
 
    <div id="s1" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s3" class="style_prevu_kit"></div> 
 
    </div> 
 
</div>

jemand bitte

helpme

Quelle

2015-08-28 The Princess

Keine Notwendigkeit von Javascript/jQuery, Sie können dies nur mit CSS tun. Sie können die :hover Klasse von CSS nutzen.

Mit dem Container :hover können Sie die Dimension der Elemente animieren (verringern). Ex: .container>div:hover ~ div { setzen die Stile aller anderen <div> Elemente als die hovered- Element
Sie können (Erhöhung) die Dimensionen des Elements animieren, die

.container { 
 
    width: 1000px; 
 
} 
 
.container:hover div:not(:hover) { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(.5); 
 
} 
 
.style_prevu_kit { 
 
    display: inline-block; 
 
    border: 0; 
 
    width: 196px; 
 
    height: 210px; 
 
    position: relative; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
    background-color: #00a096; 
 
} 
 
.container .style_prevu_kit:hover { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1.5); 
 
}

<div align="center"> 
 
    <div class="container"> 
 
    <div id="s1" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s3" class="style_prevu_kit"></div> 
 
    </div> 
 
</div>

schwebte ist Aktualisieren

Da gibt es einige Probleme beim Schweben zwischen den beiden Elementen Alle Elemente sind vertraglich festgelegt, es ist besser, Javascript zu verwenden. Keine Notwendigkeit von Javascript/jQuery, nehme ich meine Wörter zurück.

Sie können siblings() verwenden, um alle gleichgeordneten Elemente der aktuellen Elemente auszuwählen.

$('.container .style_prevu_kit').hover(function() { 
 
    $(this).siblings('.style_prevu_kit').addClass('animate'); 
 
}, function() { 
 
    $(this).siblings('.style_prevu_kit').removeClass('animate'); 
 
});

.container { 
 
    width: 1000px; 
 
} 
 
div.animate { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(.5); 
 
} 
 
.style_prevu_kit { 
 
    display: inline-block; 
 
    border: 0; 
 
    width: 196px; 
 
    height: 210px; 
 
    position: relative; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
    background-color: #00a096; 
 
} 
 
.container .style_prevu_kit:hover { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div align="center"> 
 
    <div class="container"> 
 
    <div id="s1" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s3" class="style_prevu_kit"></div> 
 
    </div> 
 
</div>

Quelle

2015-08-28 03:53:18 Tushar

Es wird nicht funktionieren für vorherige Elemente - Was ist mit Wenn Sie das letzte Element schweben –

Jetzt bevor Sie ein Element schweben .. alles wird klein ... eine richtige Lösung mit nur CSS wird schwierig –

Da Sie mit jQuery markiert haben, können Sie etwas tun, fügen Sie wie eine Klasse an alle Geschwister Elemente, wenn ein Element schwebte, dann können Sie hinzufügen CSS-Regeln zu dieser Klasse eine kleinere Ansicht

jQuery(function($) { 
 
    $('.style_prevu_kit').hover(function(e) { 
 
    $(this).siblings().toggleClass('small', e.type == 'mouseenter') 
 
    }) 
 
})

.style_prevu_kit { 
 
    display: inline-block; 
 
    border: 0; 
 
    width: 196px; 
 
    height: 210px; 
 
    position: relative; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
    background-color: #00a096; 
 
} 
 
.style_prevu_kit:hover { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1.5); 
 
} 
 
.style_prevu_kit.small { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div align="center"> 
 
    <div style="width:1000px;"> 
 
    <div id="s1" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s3" class="style_prevu_kit"></div> 
 
    </div> 
 
</div>

Quelle

2015-08-28 03:43:02

http://jsfiddle.net/arunpjohny/d0epa71y/ –

aber können wir tun es ohne j Frage –

@ThePrincess Ich glaube nicht, dass ... da es nicht alle Geschwister Selektor ... wie Sie sehen können die anderen Antworten nicht für alle Elemente funktionieren –

Sie CSS-Selektor ~ Das funktioniert aber nur für die nächsten Geschwister und nicht die vorherigen benutzen konnten. Die Auswahl der vorherigen Geschwister ist nicht möglich. http://jsfiddle.net/q041cwd8/

.style_prevu_kit:hover ~.style_prevu_kit { 
    box-shadow: 0px 0px 150px #000000; 
    z-index: 2; 
    -webkit-transition: all 200ms ease-in; 
    -webkit-transform: scale(0.5); 
    -ms-transition: all 200ms ease-in; 
    -ms-transform: scale(0.5); 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: scale(0.5); 
    transition: all 200ms ease-in; 
    transform: scale(0.5); 
}

Quelle

2015-08-28 03:55:03 Chanckjh

W ob du das letzte Element schwebst –

Ich denke, das viel simpeler getan werden kann. Wenn Sie eines der Quadrate überlagern, bewegen Sie den Mauszeiger über den Container. Sie können das verwenden.Im Beispiel unten verwende ich Farbe und Schriftgröße das Beispiel etwas weniger kompliziert zu halten:

/* Default state */ 
 
#container .style_prevu_kit{ 
 
    opacity: 0.75; 
 
    background: orange; 
 
    display: inline-block; 
 
    width: 40%; 
 
    height: 50px; 
 
    vertical-align: top; 
 
    transition: opacity 0.5s, background 0.5s, font-size 0.5s; 
 
} 
 
/* The other not selected elements */ 
 
#container:hover .style_prevu_kit{ 
 
    opacity: 0.5; 
 
    background: blue; 
 
} 
 
/* The currect selected element */ 
 
#container .style_prevu_kit:hover{ 
 
    opacity: 1.0; 
 
    background: green; 
 
    font-size: 2em; 
 
}

<div align="center"> 
 
    <div id="container" style="width:100%;"> 
 
    <div id="s1" class="style_prevu_kit">s1</div> 
 
    <div id="s2" class="style_prevu_kit">s2</div> 
 
    <div id="s2" class="style_prevu_kit">s3</div> 
 
    <div id="s3" class="style_prevu_kit">s4</div> 
 
    </div> 
 
</div>

Quelle

2015-08-28 07:53:42 Martijn

Ändern Sie die Klasse des anderen Divs, wenn Sie auf einem div schweben

Antwort

Verwandte Themen