✔ Hover- Effekt mit runden Ecken und Transparenz

[qsrs]

Hallo,

ich habe nun eine Methode gefunden, um div-Elemente transparent darzustellen und mit runden Ecken. Das CSS dazu sieht wiefolgt aus:

.b1, .b2, .b3, .b4 {
	font-size:1px;
	overflow:hidden;
	display:block;
}
.b1 {
	height:1px;
	background:#000000;
	margin:0 5px;
	filter:alpha(opacity=60);
	opacity:0.6;
}
.b2 {
	height:1px;
	background:#FFFFFF;
	border-right:2px solid #000000;
	border-left:2px solid #000000;
	margin:0 3px;
	filter:alpha(opacity=60);
	opacity:0.6;
}
.b3 {
	height:1px;
	background:#FFFFFF;
	border-right:1px solid #000000;
	border-left:1px solid #000000;
	margin:0 2px;
	filter:alpha(opacity=60);
	opacity:0.6;
}
.b4 {
	height:2px;
	background:#FFFFFF;
	border-right:1px solid #000000;
	border-left:1px solid #000000;
	margin:0 1px;
	filter:alpha(opacity=60);
	opacity:0.6;
}
.contentb {
	background:url(../media/images/bg_window.png);
	border-right:1px solid #666;
	border-left:1px solid #666;
	padding: 10px;
}
.contentb div {
	margin-left: 5px;
}

Angewandt wird das ganze dann mit:

    <b class="b1"></b>
    <b class="b2"></b>
    <b class="b3"></b>
    <b class="b4"></b>
    <div class="contentb">
    <div>
    Inhalt der Box
    </div>
    </div>
    <b class="b4"></b>
    <b class="b3"></b>
    <b class="b2"></b>
    <b class="b1"></b>

Ich benötige für diese Methode nun eine Lösung, um die Farbe des Hintergrundes und des Rahmens dieser Box zu ändern, wenn der Mauszeiger sich darüber befindet - ich möchte daraus also einen Link machen. Ich habe es folgendermaßen versucht:

.contentb a:hover {
	background:url(../media/images/bg_window_hover.png);
	border-right:1px solid #666;
	border-left:1px solid #666;
	padding: 10px;
}

Allerdings ohne Erfolg. Ich denke die Lösung ist relativ einfach, allerdings mache ich nicht allzu häufig etwas mit CSS. Über Hilfe wäre ich sehr dankbar.

 

[SpiceLab]

Die CSS-Formatierung eines Elternelements (<div class="contentb">) lässt sich nicht durch Anwendung der :hover-Pseudoklasse auf dessen Nachfolgeelement (<a>) beeinflussen.

Du hast hier aber genauso die Möglichkeit, die :hover-Pseudoklasse direkt auf das Element anzuwenden, dessen Formatierung beim Überfahren mit dem Mauszeiger wechseln soll:

.contentb:hover {
    background:url(../media/images/bg_window_hover.png);
    border-right:1px solid #666;
    border-left:1px solid #666;
    padding: 10px;
}

 

[qsrs]

Vielen Dank spicelab, das hat mir schon sehr geholfen.

Allerdings ist es in diesem CSS so, dass der obere und untere Bereich der "Box" mit .b2 .b3 .b4 definiert wird. Der Effekt ist jetzt der, dass zwar der Hintergrund von .contentb geändert wird, nicht aber von den anderen Bereichen. Das Gleiche auf .b2 .b3 .b4 anzuwenden würde ja nichts bringen, da dies sozusagen nur die Ober/Unterkanten sind.

Gibt es eine Möglichkeit, bei einem hover von .contentb die Farbe bzw. den Hintergrund von .b2 .b3 .b4 zu ändern?

 

[SpiceLab]

Lediglich für den unteren Abschnitt mittels dem Selektor für benachbarte Elemente.

Da aber gleichermaßen der obere Rahmen sich ändern soll, stellt dies kein Hindernis dar, wenn dein best. HTML-Code in ein Elternelement eingebettet ist:

<div class="parentbox">
    <b class="b1"></b>
    <b class="b2"></b>
    <b class="b3"></b>
    <b class="b4"></b>
    <div class="contentb">
    <div>
    Inhalt der Box
    </div>
    </div>
    <b class="b4"></b>
    <b class="b3"></b>
    <b class="b2"></b>
    <b class="b1"></b>    
</div>

.parentbox:hover .b1,
.parentbox:hover .b2,
.parentbox:hover .b3,
.parentbox:hover .b4 {
/* gewünschte Formatierung */
}

 

[SpiceLab]

Nachtrag.

Für den Hover-Wechsel bei .contentb lautet der Selektor demnach dann entsprechend:

.parentbox:hover .contentb {
    background:url(../media/images/bg_window_hover.png);
    border-right:1px solid #666;
    border-left:1px solid #666;
    padding: 10px;
}

 

[qsrs]

Vielen Dank, das hat mir wirklich sehr geholfen.