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

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

Wie kann ich das Bild beim Überfahren mit der Maus ändern?

Hallo liebe Leute,

ich mache momentan ein Praktikum und habe eine Aufgabe bekommen, zu der ich zwar viel gegoogelt, aber leider keine Lösung hinbekommen habe.

Vielleicht könnt ihr mir dabei helfen?

Die Aufgabe lautet:

Beim Überfahren des Frosches mit dem Mauszeiger springt der Frosch auf den Boden. Wenn man auf das Podest klickt, dann sitzt er wieder oben auf seinem Podest.

Der HTML-Code:

<form>
  <div>
    <input id="podest" type="button" value="zurück"/>
  </div>
  <div id="frosch">
    <img alt="" border="0" height="136" src="frosch.png" width="150"/>
  </div>
</form>

Der CSS-Code:

body {
  background-color: white;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 15pt;
  color: green;
}

#frosch {
  position: absolute;
  bottom: 330px;
  left: 200px;
}

#podest {
  position: absolute;
  bottom: 0px;
  left: 200px;
  height: 350px;
  width: 150px;
  background-color: orange;
  color: white;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 20pt;
}

Das soll also mit JavaScript gemacht werden.

Vielen Dank im Voraus!

MfG

...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

Warum ist da ein weißer Rand?

Hey, ich habe eine Frage zu HTML.

Ich habe bis jetzt diese Navigationleiste erarbeitet, weiß jedoch nicht wieso dort ein weißer Rand ist?

Könnt ihr mir helfen?

Das ist der HTML Code:

<nav id="nav">
<ul>
<li class="current" style="white-space: nowrap;">
<a href="">Home</a>
</li>
<li style="white-space: nowrap;">
</li>
<li style="white-space: nowrap;">
<a href="">Neumöbellogistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Lager & Logistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Werkstatt</a>
</li>
<li style="white-space: nowrap;">
<a href="">Kontakte</a>
</li>
</ul>
</nav>

----------------------------------------------------------------------------------------------------------------------------------

Und das der CSS code:

#nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
background-image: url("C:\Users\liam\Desktop\CT\Headerline.png");
width: 100%;
height: 3.25em;
line-height: 3.25em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: default;
}
#nav ul {
position: relative;
z-index: 1001;
}
#nav li {
display: inline-block;
top: 0;
position: relative;
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-o-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
}
#nav li > ul {
display: none;
}
#nav li a, #nav li span {
-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
transition: background-color .075s ease-in-out, color .075s ease-in-out;
position: relative;
display: block;
text-decoration: none;
color: #6b7770;
top: -6px;
padding: 6px 1.5em 0.25em 1.5em;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: 0;
}
#nav li:hover, #nav li.active {
top: 3px;
}
#nav li:hover a, #nav li:hover span {
background: #C1CAC5;
color: #fff;
}
#nav li.active a, #nav li.active span {
background: #C1CAC5;
color: #fff;
}
#nav li.current a {
background: #b1ddab;
color: #fff;
}

----------------------------------------------------------------------------------------------------------------------------------

Ich hoffe ihr könnt mir helfen!

...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

Was möchtest Du wissen?