CSS wenn ich z.B. über einen Button mit der Maus fahre soll der Button darüber ausgrauen?

3 Antworten

In CSS verwendet man dafür unter anderem Pseudo-Selektor, auch als Kontext-Selektoren bekannt. Genauer gesagt man so mit Hilfe des direkten ( + ) und indirekten ( ~ ) Nachbar-Selektors andere Elemente ansprechen kann. 

HTML5 Markup:

<section class="boxes">
<div class="box-1">...</div>
<div class="box-2">...</div>
<div class="box-3">...</div>
</section>

CSS:

/* Direkt = folgendes Element */
.box-1:hover + .box-2 {}

/* Indirekt = Element auf selber Ebene */
.box-1:hover ~ .box-3 {}

Je nach dem wie dein Markup ausschaut, entweder Plus (direkt, folgend) oder Tilde (indirekt, auf selber Ebene) zum Selektieren verwenden musst. Sprich so zwei Elemente miteinander verkettest. 

LG medmonk 

bootstrap ist ne tolle bibliothek für java script. die haben sowas zb auch

Nur hierfür Bootstrap zu verwenden wäre ein Overkill.

2

bootstrap ist ne tolle bibliothek für java script.

  1. Bootstrap ist keine Bibliothek für JavaScript, sondern ein auf HTML, CSS und JS basierendes Mobile-first Framework. 
  2. Ein »Mit Kanonen auf Spatzen schießen« ist noch untertrieben. Mit anderen Worten, bisschen CSS und der Drops ist gelutscht. 

LG medmonk 

1

Das kommt darauf an, wie die Struktur deiner Seite ist. Kannst du deinen HTML-Code bzw. den erforderlichen Ausschnitt ebenfalls posten?

Das ist alles was ich habe. Es soll nur die andere Klasse angesprochen werden bei :hover 

0
@susnkettler

Wie, das ist alles? Ohne HTML-Code kann ich dir nicht weiterhelfen. Es kommt sehr darauf an, ob das andere Element z.B. ein Geschwisterelement zum Button ist. Du kannst mit CSS nur Elemente auf gleicher oder tieferer Ebene ansprechen. Befindet es sich auf höherer Ebene, müsstest du auf JavaScript zurückgreifen.

1

HMTL/CSS - Wie kann ich ein Img in einem Div zentrieren?

Moin,

hat jemand eine Idee, wie ich über meiner Navbar ein 100px Image mit CSS genau mittig positioniere? Die Ansätze, die ich bis jetzt im Internet gefunden habe, waren nicht besonders hilfreich, was meinen Fall angeht...

Das wäre der html-Ausschnitt...:

<html>
    <body>
        <header>
            <div class="navbar-body">
                <img class="navbar-logo" src="logo_navbar.png"></img>
            </div>
        </header>
    </body>
</html>

...und das der für CSS:

.navbar-body{
    color: FFFFFF;
    background-color: 1F1F1F;
    font-family: Arial Black;
    font-size: 20px;
    height: 80px;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar-logo{
    height: 100px;
    margin: 30px auto 0;
}

Mein Problem ist, dass sich bei "margin: auto" und "display: block" zwar die Grafik mittig positioniert, aber dafür den Nav-Container mit verschiebt. Hat hier jmd eine Lösung parat?
LG

...zur Frage

Tumblr Blog Like Button hinzufügen und Reblog Button verschieben?

Hallo, auf meinem Blog sieht es bisher so aus, wenn man Einträge/Bilder rebloggen will. Ist es möglich den Reblog Button nach rechts zu verschieben (also außerhalb des Bildes) und einen Like Button (Herz) auch noch unter den Reblog Button hinzuzufügen?

...zur Frage

raspberry pi jquery

Ich hab auf meinem raspi einen apache server und wollte mal fragen wie ich meinen jQuery script in html ausfüren kann -> es funktioniert nicht

html: Button Magic

Click Me!

css: div { height: 60px; width: 100px; border-radius: 5px; background-color: #69D2E7; text-align: center; color: #FFFFFF; font-family: Verdana, Arial, Sans-Serif; opacity: 0.5; }

jQuery $(document).ready(function() { $('div').click(function() { $('div').hide(1000).slideDown(1000); }); });

Kann mir jemand helfen?

...zur Frage

Wo kann ich einen "Like Zähler" finden um es auf meiner Internetseite zu benutzen?

Ich hab nach einem Tutorial und Scripts gesucht aber finde nichts. Es geht hier nicht um Facebook Like Button. Es soll ein individuelles Like Button sein für meine Internetseite. Also es sollte sich so aufteilen. - Zähler - Button Also der Zähler soll einen unabhängigen "div" haben als der Button. Damit ich bspw den Button ganz oben hab und den Zähler zb unten im Footer.

Ich wäre SEHR dankbar für Hilfe, sitze hier eine Ewigkeit und finde nichts :(

...zur Frage

Bei klick auf button text anzeigen mit js?

Ich möchte das wenn ich auf einen Button drücke, das ein text angezeigt wird. Wenn ich auf einen anderen button drücke soll der vorherige text verschwinden und ein neuer Auftauchen, wie mache ich das? evtl. mit js?

...zur Frage

HTML Buttons in CSS nach value ansteuern?

Ich habe einen button <button value = "1" Hier ist ein button Um diesen button zu gestalten würde ich ihn gerne einzeln in CSS ansprechen. Jetzt zu meiner Frage, geht sowas auch über value? Also das ich den button mit value "1" in CSS ansprechen kann?

...zur Frage

Was möchtest Du wissen?