html - CSS3 -transition- -

-

i have navigation bar using css highlight on hover , when li has class active. has transition fade background in. have far:

css:

#nav {height:32px; border-top: 1px solid #fff; border-right: 1px solid #ffffff; background: #141941 url('../img/toptierbg.gif') repeat-x; } #nav ul {padding: 0px; list-style: none; height:32px; width:100%;  } #nav li { position:relative; float: left; margin:0; border-left:1px solid #fff; line-height:30px; background: #141941 url('../img/toptierbg.gif') repeat-x; padding-top:0px;} #nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {width:156px; display:block; text-align:center; font-size:12px; text-decoration:none; color:#fff; margin: 0px 0px 0px 0px; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; } #nav .active {text-align:center; text-decoration:none; padding:0; color:#fff; height:32px; background: #1d2248 url('../img/activetab.gif') repeat-x; } #nav a:hover, #nav a:active{background: #1d2248 url('../img/activetab.gif') repeat-x; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; }

html:

<div id="nav"><ul id="xmp-nav"> <li class="active"><a href="/" style="width:196px;">home</a></li> <li><a href="login.php" style="width:195px;">staff login</a></li> <li><a href="resources.php" style="width:195px;">resources</a></li> <li><a href="information.php" style="width:195px;">parent information</a></li> <li><a href="links.php" class="last" style="width:195px;">links</a></li> </ul></div>

problem when hover on non-active tab transition doesn't happen when hover on active tab transitions non-active style active style.

i forward hearing ideas, if not possible way have laid out no problem.

here link!

transitions works way:

  1. you have element state (for example li).
  2. you change elements state b (for example adding new class li or adding :hover it) changing it's properties (for example background: red).
  3. in new class/state adding transition, , set property animate (for example background).

and can see smooth animation.

in example have 2 transitions:

  1. "transition: background 0.5s linear;" on #nav a — didn't work because there no background change in #nav a on hover.
  2. transition: background 0.5s linear; on #nav a:hover, #nav a:active — means change background of "#nav a" "none", "background: #1d2248 url('../img/activetab.gif') repeat-x;" linear animation in 0.5s.

i made simplified jsfiddle code shows how change animations on hover:

http://jsfiddle.net/hztwz/


Comments

Post a Comment

Popular posts from this blog

delphi - How to convert bitmaps to video? -

-
Image
my application creates images fractals , love feeling of 'flying' around fractal. once saved 2000 bitmaps file , created avi using premiere. experience rather frustrating though succeeded in creating movie. spectacular. of course want create video application. don't care niftyness of codec, compression or whatever. want have video can replay on systems. in past have tried never succeeded. triggered question alas not ffmpeg running. update i decided adapt question , put bounty it. have seen several solutions attractive (because it's simple) seems me taviwrite. tried taviwriter did not succeed. in procedure taviwriter.write; function call around line 370 avierr := avisavev(s, // pchar(filename), nil, // file handler nil, // callback nstreams, // number of streams streams, compoptions); // compress options
Read more

jasper reports - Fixed header in Excel using JasperReports -

-
how can create excel report fixed header using japserreports? mean need header fixed when scroll excel file. this possible adding couple properties in jrxml file each report. take @ advanced excel features freeze panes. if wanted freeze after first column header (down left side basically) this: <statictext> <reportelement style="sans_bold" mode="opaque" x="0" y="60" width="104" height="20" forecolor="#ffffff" backcolor="#666666"> <property name="net.sf.jasperreports.export.xls.auto.filter" value="start"/> <property name="net.sf.jasperreports.export.xls.column.width" value="110"/> <property name="net.sf.jasperreports.export.xls.freeze.column.edge" value="left"/> </reportelement> &
Read more

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -

-
import pyodbc,nltk,array cnxn = pyodbc.connect('driver={mysql odbc 5.1 driver};server=127.0.0.1;port=3306;database=information_schema;user=root; password=1234;option=3;') cursor = cnxn.cursor() cursor.execute("use collegedatabase ;") cursor.execute("select * sampledata ; ") cnxn.commit() s=[] j=[] x=[] words = [] w = [] sfq = [] pos=[] entry in cursor: s.append(entry.injury_type),j.append(entry.injury_desc) nltk.tokenize import punktwordtokenizer nltk.corpus import stopwords tokenizer = punktwordtokenizer() english_stops = set(stopwords.words('english')) in range(0,26): # filter stop words tokenizer.tokenize(j[i]) w.append([word word in tokenizer.tokenize(j[i]) if word not in english_stops]) in range(0 , 26):#converting tokenzied text ito string sfq.append(" ".join(w[a])) replacers import regexpreplacer replacer = regexpreplacer() in range (0,26):#pos tagging replacer.repl
Read more