Cześć, chciałbym zrobić tak aby:
1. najechana komórka kursorem powiększa się
2. gdy najeżdzamy na inną komórka kolor aktywnej zmienia się na "podstawowy" tzn taki jak w innych komórkach a najechana komórka zmienia kolor na lime
Jakby ktoś móglby pomoc wielkie dzięki:)))
body
{
width:1000px;
margin:auto;
font:11px Verdana;
background: #222222 ;
}
ul.nawigacja ul{display:none}
ul.nawigacja li:hover>ul{display:block}
ul.nawigacja,ul.nawigacja ul {
list-style:none;
padding:0px 1px 1px 0px;
background-color: #888888;
background-repeat:repeat;
border-color:black;
border-width:0px;
border-style:solid;
}
ul.nawigacja {
width: 1000px;
display:block;
zoom:1;
float: left;
border-bottom: 1px solid #66FF00;
}
ul.nawigacja li{
margin:2px 0px 2px 4px;
font-size: 0px;
}
ul.nawigacja a:active, ul.nawigacja a:focus {
outline-style:none;
}
ul.nawigacja a, ul.nawigacja li.dis a:hover, ul.nawigacja li.sep a:hover {
width:200px;
height:50px;
padding-top:5px;
padding-left:2px;
border-radius: 5px;
display:block;
vertical-align:middle;
background-color: #66FF00;
border-width:0px;
border-color:#FCEEB0;
border-style:solid;
text-align: center;
text-decoration:none;
font-weight: bold
padding:5px;
font:20px consolas;
color: #000000;
text-decoration:none;
cursor:pointer;
}
ul.nawigacja span{
overflow:hidden;
}
ul.nawigacja li {
float:left;
}
ul.nawigacja ul a {
text-align: center;
white-space:nowrap;
}
ul.nawigacja li:hover{
position:relative;
}
ul.nawigacja li:hover>a{
background-color: black;
border-color:#4C99AB;
border-style:solid;
text-align:center;
font:11px consolas;
color: #000000;
text-decoration:none;
}
ul.nawigacja li a:hover{
position:relative;
background-color: lime ; <-- nieaktywne najechane
border-color:#4C99AB;
border-style:solid;
font:25px consolas;
color: white;
text-decoration:none;
}
.animuj
{
-webkit-transition: All 0.5s ease-in-out;
-moz-transition: All 0.5s ease-in-out;
-o-transition: All 0.5s ease-in-out;
transition: All 0.5s ease-in-out;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
.animuj:hover
{
position: relative;
z-index: 5;
cursor: pointer;
-webkit-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
}
#aktywny
{
background: lime;
color: white;
text-align: center;
border-radius: 5px;
}
#dane
{
width:950px;
margin:auto;
border-left: 1px dotted green;
border-right: 1px dotted green;
padding-left:5px;
padding-right:5px;
background: #dcdcdc;
}
#logo_ {
width: 900px;
height: 50px;
margin:auto;
}
td#logo
{
text-align: center;
font: 30pt "Comic Sans MS";
font-weight: bold;
color: #66FF33;
text-shadow:3px 3px 3px black;
}
pre {
font: 16pt consolas,"Courier New",courier,monospace;
margin: 0px 0px 0px;
color: white;
}
code{
color:brown;
background:moccasin;
font: 8pt consolas,"Courier New",courier,monospace;
font-weight: bold;
letter-spacing : 1px;
text-align: center;
}
em{
color:brown;
font: 8pt consolas,"Courier New",courier,monospace;
font-weight: bold;
letter-spacing : 1px;
text-align: center;
}
iframe
{
margin-right:5px;
}
p {
text-indent: 0.5cm;
}
#cytat {
padding-left: 5px;
background:pink;
font: 8pt "Comic Sans MS";
color: white;
border-left: 3px #66FF33;
letter-spacing : 1px;
}
a.aa
{
font-size: 8pt;
font-weight: bold;
color: brown;
text-decoration: none;
border-bottom: 1px dashed #66FF33 ;
}
a.aa:hover {
font-size: 8pt;
font-weight: bold;
color:white;
background:purple;
text-decoration: none;
}
