XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Mehrere div Objecte per hover bewegen (http://xhtmlforum.de/showthread.php?t=70077)

adl-solutions 28.09.2013 22:15

CSS Mehrere div Objecte per hover bewegen
 
Hallo erstmal,
wie kann ich per hover über ein element. Das eine Element drehen und bei einem anderes div element die width ändern??
LG Elias

Thielo 28.09.2013 22:55

Mit CSS? Ohne Code kann man nicht mehr sagen. Kommt immer auf die Verschachtelung an.

explanator 28.09.2013 22:56

Kommt darauf an wo sich das Div befindet. Auf gleicher Ebener, darunter oder ganz woanders?

Ein Link zur Seite oder zumindest Quellcode zu sehen wäre sinnvoll.





Edit: der Paketdienst war zu langsam diesmal.

adl-solutions 28.09.2013 23:01

Mein HTML Code:
HTML-Code:

<div id="header_container" style="position: fixed; top: 0px; left: 0px; width: 1910px; height: 50px; ">
        <div class="background" style="position: fixed; top: 0px; left: 0px; width: 50px; height: 50px; ">
        </div>
        <div class="box rotate-it box2" style="position: fixed; top: 0px; left: 0px; ">
            <div class="icon" style="position: fixed; top: 0px; left: 0px; width: 50px; height: 50px;">
            </div>
        </div>
        <div class="box2 scale" style="position: fixed; top: 0px; left: 50px;" ></div>
    </div>

div class="box2 scale" style="position: fixed; top: 0px; left: 50px;" ></div>
Dieser Teil soll lang gezogen werden wenn man auf diese div box <div class="box rotate-it box2" style="position: fixed; top: 0px; left: 0px; "></div>.
Und diese div box <div class="box rotate-it box2" style="position: fixed; top: 0px; left: 0px; "></div> soll sich dann drehen.

Code:

.box
                {
                    overflow: hidden;
                transition-duration: 0.8s;
                transition-property: transform;
                    z-index: 0;
                    width: 50px;
                    height: 50px;
                }
.rotate-it:hover,
                .rotate{
                        -moz-transform:rotate(45deg); /* Firefox 3.6 Firefox 4 */
                    -webkit-transform:rotate(45deg); /* Safari */
                    -o-transform:rotate(45deg); /* Opera */
                    -ms-transform:rotate(45deg); /* IE9 */
                    transform:rotate(45deg);
                }

Und das andere bekommich noch nicht hin.
LG Elias

explanator 28.09.2013 23:19

Solange du da inlinestyles verwendest, kannst du nichts machen, da die inlinestyles als letztes ausgeführt werden.

Verzichte auf inlinestyles.
Warum hast du die Klasse box dort drin?

Räume erst mal deine Klassennamen auf, sonst steigt da keiner durch.
Namen sollten nicht nach CSS-Eigenschaften benannt werden, also eine Klasse background ist nicht gut gewählt. Wozu ist das Div dort?

adl-solutions 28.09.2013 23:25

Hey,
wie kann ich auf die verzichten?

Wenn ich richtig verstehe, ist doch mit inlinestyles die styles gemeint die im HTML Dokument geschrieben werden. Oder?
LG Elias

explanator 28.09.2013 23:40

zu Inlinestyles:
Inline-Styles in HTML-Elementen - Webkompetenz

weiterführende Hinweise: CSS in HTML einbinden - Webkompetenz

lottikarotti 29.09.2013 12:35

Hallöchen,

Zitat:

Zitat von adl-solutions (Beitrag 533936)
Hey,
wie kann ich auf die verzichten?

Wenn ich richtig verstehe, ist doch mit inlinestyles die styles gemeint die im HTML Dokument geschrieben werden. Oder?
LG Elias

mehr zum Thema findest du hier: Little Boxes. Ich rate dringend zur Lektüre.

Viele Grüße,
lotti


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:09 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023