class:active niet werkend
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
.hvr_to_btn :hover, .hvr_to_btn :active {
background: #e9dba9; /* Old browsers */
background: -moz-linear-gradient(-45deg, #e9dba9 0%, #e9dba9 25%, #d7bd6c 50%, #e9dba9 75%, #e9dba9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e9dba9), color-stop(25%,#e9dba9), color-stop(50%,#d7bd6c), color-stop(75%,#e9dba9), color-stop(100%,#e9dba9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* IE10+ */
background: linear-gradient(135deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9dba9', endColorstr='#e9dba9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 1px solid #bcbbbb ;
width: 150px;
margin: 0 auto;
}
?>
.hvr_to_btn :hover, .hvr_to_btn :active {
background: #e9dba9; /* Old browsers */
background: -moz-linear-gradient(-45deg, #e9dba9 0%, #e9dba9 25%, #d7bd6c 50%, #e9dba9 75%, #e9dba9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e9dba9), color-stop(25%,#e9dba9), color-stop(50%,#d7bd6c), color-stop(75%,#e9dba9), color-stop(100%,#e9dba9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* IE10+ */
background: linear-gradient(135deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9dba9', endColorstr='#e9dba9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 1px solid #bcbbbb ;
width: 150px;
margin: 0 auto;
}
?>
.hvr_to_btn:hover, .hvr_to_btn:active
Wat niet werkt is dat hij die stijl (hierboven) niet pakt bij active maar wel hover
HTML:
<li class="hvr_to_btn"><a href="?page=info_opleidingen">Opleidingen</a></li>
<li class="hvr_to_btn"><a href="?page=info_bemiddeling">Bemiddeling</a></li>
<li class="hvr_to_btn"><a href="?page=info_engineering">Engineering</a></li>
en .hvr_to_btn :hover,.hvr_to_btn>a:active {
maar werkt niet?
Gewijzigd op 08/04/2013 13:32:39 door Francoi gckx
Defines the style for active links.
A link becomes active once you click on it.
Ja dit wil ik hebben alleen werkt het niet
ik klik erop (dan is die active) maar geen css wijziging
Gewijzigd op 08/04/2013 13:34:28 door Francoi gckx
Francoi gckx op 08/04/2013 11:48:45:
Hover doet die maar active niet (active is toch de staat waarin een link is geklikt en je ook op die link's pagina bevind)
Zoals je ziet is dat dus iets anders dan wat jij hier zegt.
Heb je een online voorbeeld?
Waarschijnlijk is het probleem dat je verkeerde volgordes gebruikt. Zie ook LoVe HAte
"active is toch de staat waarin een link is geklikt"
is toch hetzelfde als wat hier word gezegd
A:active
Defines the style for active links.
A link becomes active once you click on it.
Maar je begrijpt wel wat ik bedoel?
Ik heb links een menu met 5 links onopgemaakt alleen een naam voor de link
als ik hover veranderd de background
datzelfde wil ik voor active (dus als iemand klikt op de link)
Wouter J op 08/04/2013 13:42:29:
CSS kan nooit weten of de link gelijk is aan de pagina waar je nu op bent. :active is dus alleen het moment dat je je muisknop ingedrukt hebt terwijl je op de link staat.
Waarschijnlijk is het probleem dat je verkeerde volgordes gebruikt. Zie ook LoVe HAte
Waarschijnlijk is het probleem dat je verkeerde volgordes gebruikt. Zie ook LoVe HAte
Ik denk dat je gelijk heb, ik heb even hover weggehaald.
dus als ik echt een link ingedrukt houd dan reageert die op active.
Dus eigenlijk is het zinloos om active te gebruiken je kan net zo goed hover gebruiken.
Ik vind het toch raar
background: #e9dba9; /* Old browsers */
background: -moz-linear-gradient(-45deg, #e9dba9 0%, #e9dba9 25%, #d7bd6c 50%, #e9dba9 75%, #e9dba9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e9dba9), color-stop(25%,#e9dba9), color-stop(50%,#d7bd6c), color-stop(75%,#e9dba9), color-stop(100%,#e9dba9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* IE10+ */
background: linear-gradient(135deg, #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9dba9', endColorstr='#e9dba9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 1px solid #bcbbbb ;
width: 150px;
margin: 0 auto;
}
Toevoeging op 08/04/2013 13:59:25:
Ja ze moeten ook dezelfde effect hebben
.hvr_to_btn :hover
en de ander zo:
.hvr_to_btn >a:active
De ene werkt wel en de ander niet, dus... wat zou dan de oplossing kunnen zijn?
.hvr_to_btn >a:hover, .hvr_to_btn >a:active
is er geen verschil..
Quote:
is er geen verschil..
Kun je me misschien exact uitleggen wat je verwacht dat er gebeurd? (wat zou er moeten veranderen en wanneer) En zet daarnaast eens neer wat er nu gebeurd.
Gewijzigd op 08/04/2013 14:04:17 door Wouter J