POPRAWKI W CSS

Question

Moglibyście tak zedytować arkusz żeby komórka najechana powiększała się i zmieniała kolor na lime oraz w tym momencie kolor aktywnej komórki zmienia się na kolor innych? NIe umiem sam tego zrobić licze na waszą pomoc:/

 

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; 

        }

 

Comments

dołącz html

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-2' />
    <meta http-equiv="X-UA-Compatible" content="IE=11" />

    <title>PTOLEMEUSZ</title>
    <link rel='stylesheet' media='screen' href='lo28.css' type='text/css'/>

<table id="logo_">
  <tr>
    <td><pre>
    <em></em>
   Jan Kowalski
     </pre>
    </td>
    <td id="logo">PTOLEMEUSZ</td>
  </tr>
</table><br />
<!--  MENU -->
<div id="menu">

<ul class="nawigacja">   
	<li class="animuj"><a id="aktywny" href="index.html">ŻYCIORYS</a></li>
	<li><a  href="p1.html">OSIĄGNIĘCIA</a></li>
	<li><a  href="p2.html"> TWIERDZENIE </a></li>
	<li><a  href="p3.html">ZADANIE</a></li>

	
</ul>
</div>
<br /><br /><br />

<!-- koniec MENU -->

<!-- dokument-->
<div id="dane">


Dane
<!-- koniec dokumentu -->
</div>
</body>
</html> 

 

---

A może by tak jednak przesiąść się na HTML5 ?

---

musze sobie z tym poradzić i tak:/ pomógłbyś? bo ja nie mam pojęcia jak zrobić

---

@Qba Czekaj,

Złamałeś regulamin. Na forum nie umieszczamy gotowców. Możemy jedynie naprowadzić.

Answer 1

Przy urzuciu js.

Pobierasz tabele i nasłuchujesz mouseover na jej komórkach. Gdy zachodzi akcja usuwasz wszystkie activ i dodajesz tylko do najechanej.