Link mit Div Hintergrundbildern a.active reagiert nicht

Hallo,

ich habe ein Problem mit einem Hyperlink. Das a.active zeigt keine Reaktion und ich weiß nicht warum.
Mittels 3 Divs und 6 Grafiken baue ich mir einen Button für jeweils a.link, a.hover and a.active zusammen

damit der Button dann so aussieht:

blau: a.link, grün: a.hover, orange: a.active

das funktioniert auch soweit. wenn ich mit der maus über den Button bzw. link gehe wird dieser grün. aber wenn ich klicke, bleibt er grün, sollte aber orange werden.

mein html code bzw. asp.net:

 
 <asp:Panel ID="DivLoginBox" runat="server" CssClass="loginBox">  
        <asp:Panel ID="DivloginBoxInner" runat="server" CssClass="loginBoxInner">  
            <!--Beispiel Linkbutton -->
            <asp:LinkButton ID="lbtnLogin" runat="server" CssClass="lnkSubmit">  
                <asp:Panel runat="server" ID="Panel1" CssClass="DIVLinkButtonContent">  
                    <asp:Panel runat="server" CssClass="DivLinkButtonLeft" ID="Panel2">  
                    </asp:Panel>
                    <asp:Panel runat="server" CssClass="DivLinkButtonRight" ID="Panel3">  
                    </asp:Panel>
                    <asp:Panel runat="server" CssClass="DivLinkButtonMid" ID="Panel4">  
                        Button Text
                    </asp:Panel>
                </asp:Panel>
            </asp:LinkButton>
            <!-- Beispiel einfacher Link -->
            <a href="#" class="lnkSubmit">  
                <asp:Panel runat="server" ID="DIVLinkButtonContent" CssClass="DIVLinkButtonContent">  
                    <asp:Panel runat="server" CssClass="DivLinkButtonLeft" ID="DivLeft">  
                    </asp:Panel>
                    <asp:Panel runat="server" CssClass="DivLinkButtonRight" ID="DivRight">  
                    </asp:Panel>
                    <asp:Panel runat="server" CssClass="DivLinkButtonMid" ID="DivMid">  
                        Hyperlink Text
                    </asp:Panel>
                </asp:Panel>
            </a>
        </asp:Panel>
    </asp:Panel>

und hier meine css definition:

.DIVLinkButtonContent
{
	display:table-cell ;
}
 a.lnkSubmit:link div.DivLinkButtonLeft
{
	background:url("../_images/blank_Left_n.gif") no-repeat;
	width:6px;
	height:24px;
	float: left;
    margin: 0; 
    padding: 0;
    text-decoration: none;

}
a.lnkSubmit:visited div.DivLinkButtonLeft
{
	background:url("../_images/blank_Left_n.gif") no-repeat;
	width:6px;
	height:24px;
	float: left;
    margin: 0; 
    padding: 0;
    text-decoration: none;

}
 a.lnkSubmit:hover div.DivLinkButtonLeft
{
	background:url("../_images/blank_Left_o.gif") no-repeat;
	width:6px;
	height:24px;
	float: left;
    margin: 0; 
    padding: 0;
    text-decoration: none;

}
a.lnkSubmit:active  div.DivLinkButtonLeft
{
	background-image:url("../_images/blank_Left_a.gif") no-repeat;
	width:6px;
	height:24px;
	float: left;
    margin: 0; 
    padding: 0;
    text-decoration: none;

}
/*middle Div*/
a.lnkSubmit:link div.DivLinkButtonMid
{
	margin:    0px 6px 0px 6px;
    padding:  3px 3px 0 0;
	height:24px;
	background:url("../_images/blank_mid_n.gif") repeat-x;
	text-align:center;
	font: 9pt "verdana"; 
	font-weight:bold;
	color: #fff; 
	text-decoration: none;
	
}
a.lnkSubmit:visited div.DivLinkButtonMid
{
	margin:    0px 6px 0px 6px;
    padding:  3px 3px 0 0;
	height:24px;
	background:url("../_images/blank_mid_n.gif") repeat-x;
	text-align:center;
	font: 9pt "verdana"; 
	font-weight:bold;
	color: #fff; 
	text-decoration: none;	
}
a.lnkSubmit:hover div.DivLinkButtonMid
{
	margin:    0px 6px 0px 6px;
    padding:  3px 3px 0 0;
	height:24px;
	background:url("../_images/blank_mid_o.gif") repeat-x;
	text-align:center;
	font: 9pt "verdana"; 
	font-weight:bold;
	color: #fff; 
	text-decoration: none;	
}
a.lnkSubmit:active  div.DivLinkButtonMid
{
	margin:    0px 6px 0px 6px;
    padding:  3px 3px 0 0;
	height:24px;
	background:url("../_images/blank_mid_a.gif") repeat-x;
	text-align:center;
	font: 9pt "verdana"; 
	font-weight:bold;
	color: #fff; 
	text-decoration: none;
}
/*right Div*/
a.lnkSubmit:link div.DivLinkButtonRight
{
	float: right; width: 6px;
    margin: 0; 
    padding: 0;
	background:url("../_images/blank_right_n.gif") no-repeat;
	height:24px;
	text-decoration: none;
}
a.lnkSubmit:visited div.DivLinkButtonRight
{
	float: right; width: 6px;
    margin: 0; 
    padding: 0;
	background:url("../_images/blank_right_n.gif") no-repeat;
	height:24px;
	text-decoration: none;
}
a.lnkSubmit:hover div.DivLinkButtonRight
{
	float: right; width: 6px;
    margin: 0; 
    padding: 0;
	background:url("../_images/blank_right_o.gif") no-repeat;
	height:24px;
	text-decoration: none;
}
a.lnkSubmit:active  div.DivLinkButtonRight
{
	float: right; width: 6px;
    margin: 0; 
    padding: 0;
	background:url("../_images/blank_right_a.gif") no-repeat;
	height:24px;
	text-decoration: none;
}

hat jemand vielleicht eine idee, was ich falsch mache?

lg maik

Please also mark the comments that contributed to the solution of the article

Content-Key: 156680

Url: https://administrator.de/contentid/156680

Printed on: April 26, 2024 at 07:04 o'clock

3 Comments

Latest comment

.active gibt es eigentlich nicht wirklich.
Das ist ein Zwischenstatus, der so lange anhält wie man den Button tatsächlich drückt.
Du siehst das Bild hier nicht, weil es eben erst geladen werden muss und das länger dauert als du normalerweise klickst.

hi, danke für deine antwort. selbst wenn ich die maus 1 minute festhalte über dem button, dann ändert das nichts, der button bleibt grün. so lang wird die grafik ja nicht zum laden brauchen.

Dann erklär mal, was du mit diesem Code bezwecken möchtest:

a.lnkSubmit:active div.DivLinkButtonRight

German Question CSS Development