1 Mouseover für 2 DIVs

tommes58 · #1 (**permalink**) 24.05.2012, 10:44

Hallo Leute,

ich habe folgende Seite:

Phillip Halisch

dort sind mehrere DIVs nebeneinander angeordnet. Diese werden durch JS mit Inhalt gefüllt.

Zusätzlich liegt auf diesen DIVs ein Text.
Bei einem Mouseover wird das transparente Bild-DIV 100% sichtbar.

Dies möchte ich nun auch für den zugehörigen Text arrangieren und zwar so, dass bei einem Mouseover beide DIVs 100% sichtbar sind.

Kann ich dieser CSS Eigenschaft:

Code:

		.linkopacity img {
        filter:alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
        -khtml-opacity: 0.6;
		}
 
		.linkopacity:hover img {
        filter:alpha(opacity=100);  
        -moz-opacity: 1.0;  
        opacity: 1.0;
        -khtml-opacity: 1.0; 
		}

mit dieser

Code:

.beschreibungsdiv {
position:relative;
left:10px;
top:-30px;
float:left;
z-index:2;
font-family:Myriad, "Myriad Pro", Verdana, Geneva, sans-serif;
font-size:90%;
color:#000;
width:800px; 

}

verknüpfen?

hubspe · #2 (**permalink**) 24.05.2012, 11:00

äh...bei mir ist da kein Text über den divs.

Es ist auch immer nur ein Teil der Seite sichtbar (wohl wegen dem blödsinnigen overflow:hidden für body).

Negative, relative Verschiebungen sind fast nie gut, weshalb man sowas besser lassen sollte.
Verstehe auch nicht was die Site soll, wirkt auf mich insgesamt ziemlich verunglückt.

tommes58 · #3 (**permalink**) 24.05.2012, 11:07

der text erscheint bei einem klick auf die bilder, hatte ich vergessen zu erwähnen. ist es denn theoretisch möglich? vielleicht muss das konzept noch mal überdacht werden, habe schon von einigen kritische stimmen vernommen

lottikarotti · #4 (**permalink**) 24.05.2012, 11:08

Hallo,

du musst opacity lediglich auf das umschließende div-Element mit der Klasse linkopacity anwenden:

Code:

.linkopacity {
    opacity: .6 ;
    ...
}

.linkopacity:hover {
    opacity: 1 ;
    ...
}

Es sollte also letztlich reichen, wenn du einfach mal das "img" oben weglässt.

PS: Wie bereits von hubspe angedeutet, solltest du das Gesamtkonzept vllt. überdenken oder zumindest overflow:hidden rausnehmen.

Gruß, lotti.

protonenbeschleuniger · #5 (**permalink**) 24.05.2012, 11:14

Ich würde auf jeden Fall mal einen Blick in die Fehlerkonsole werfen, du hast ein Problem mit den CSS Farbangaben

Code:

Zeitstempel: 24.05.2012 11:08:06
Warnung: Farbe erwartet, aber '#11111' gefunden.  Fehler beim Verarbeiten des Wertes für 'background-color'.  Deklaration ignoriert.
Quelldatei: http://halisch.vps9676.alfahosting-vps.de/style.css
Zeile: 2

Auch ein Blick in den Quelltext lohnt sich. Firefox stellt fehlerhaftes HTML dunkelrot dar und zumindest eine Stelle ist in deinem code dunkelrot.

zu deinem Problem kann ich auch nichts sagen, da ich nur den Namen sehe, eine halbe Grafik rechts, die bei einem Mausover anscheinend den Wert für opacity ändert.

tommes58 · #6 (**permalink**) 24.05.2012, 11:34

Oh verdammt, bei Chrome klappt es mit der horizontalen Navigation, bei Firefox nicht. Okay, das mit dem umschließenden DIV und dem dortigen anwenden der Transparenz ist ein hervorragender Tipp, man man man, hätte ich auch mal selber drauf kommen können.

Dann versuche ich mal, bei Firefox die horizontale Navigation zu aktivieren...

tommes58 · #7 (**permalink**) 24.05.2012, 11:44

Weiß vielleicht einer von euch, warum das scrollen in Chrome funktioniert und bei Firefox nicht. Alternativ lässt sich die Seite mit dem unteren Schieberegler scrollen.

Zumindest klappt schon mal die Sache mit der Transparenz. +1

Wenn ich overflow: hidden entferne, klappt das horizontale navigieren nicht mehr.

protonenbeschleuniger · #8 (**permalink**) 24.05.2012, 12:25

Zitat:

Zitat von tommes58

Weiß vielleicht einer von euch, warum das scrollen in Chrome funktioniert und bei Firefox nicht. Alternativ lässt sich die Seite mit dem unteren Schieberegler scrollen.

Was für ein Schieberegler? Warum benutzt du nicht einfach das was der User kennt? So muss jeder die Bedienelementen suchen, wenn er auf deine Seite kommt. Die Fehler im CSS sind übrigens immer noch da.

lottikarotti · #9 (**permalink**) 24.05.2012, 13:07

Zitat:

Zitat von tommes58

Weiß vielleicht einer von euch, warum das scrollen in Chrome funktioniert und bei Firefox nicht. Alternativ lässt sich die Seite mit dem unteren Schieberegler scrollen.

Hallo,

das soll ein Schieberegler sein?

Mir ist das, bis du es hier erwähnt hast, gar nicht aufgefallen - hab auch nicht so genau hingeschaut. Ich dachte die Seite besteht nur aus dem Namen und dem ersten Bild. Ich würde das Ganze etwas offensichtlicher gestalten, schließlich will man den Nutzer ja zur Interaktion einladen.

Gruß, lotti.

tommes58 · #10 (**permalink**) 24.05.2012, 13:39

Ihr habt ja recht, aber der Plan war eben, sich mit diesem Regler zu bewegen, anfangs gab es auch noch plakative Pfeile, die jedoch auf Wunsch eines einzelnen entfernt wurden. Jedoch zeigen die Beiträge im Forum deutlichen Handlungsbedarf in Sachen Usability

Das muss dann noch mal diskutiert werden.

Habe nun die CSS Deklaration für die Farbwerte geändert. Da ich das Projekt übernommen hatte, ist es mir gar nicht aufgefallen, vielen Dank für den konstruktiven Hinweis!!

Aber warum das scrollen nicht klappt außer bei IE und Chrome könnt ihr mir auch nicht sagen oder? Ich stehe mit meinen Kenntnissen auch noch recht am Anfang, deswegen hab ich mich hier an das Forum gewandt, hat sich ja gelohnt, danke =)

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIVs wollen nicht in Container	Echnotron	CSS	4	22.02.2012 08:46
Fullscreen Container mit internen divs	purewhite	(X)HTML	1	02.11.2009 15:24
n Div's in eine Zeile	Mustangore	CSS	9	20.08.2009 15:19
Höhenanpassung von divs	localex	CSS	1	21.11.2007 11:25
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32