Интерфейс, реагирующий на наведение курсора мыши

<div id="wanderwall">

<div class="wrapper">

<div class="frame first" id="frame1">    <a
alt="jQuery используется для анимаций чудесной стены" href="#"
id="link1" style="display: block;">    
<span>jQuery</span>    
</a></div>

<div class="frame two" id="frame2">    <a
alt="CSS3 используется для линейных градиентов и стилей" href="#"
id="link2" style="display: block;">    
<span>CSS3</span>     </a></div>

<div class="frame three" id="frame3"><a alt="Сила HTML5 при
выводе подсказок" href="#" id="link3" style="display: block;">
<span>HTML5</span> </a></div>

<div class="frame fourth" id="frame4">    <a
alt="Сила Font-Face для удивительных шрифтов" href="#" id="link4" style="display:
block;">     <span>@font-face</span>
    </a></div>

</div>

</div>

<div class="page">
<div class="mantletext">
<h3>jQuery</h3>
<h2>Чудесная стена 1</h2>
</div>
</div>
<div class="page">
<div class="mantletext">
<h3>jQuery</h3>
<h2>Чудесная стена 2</h2>
</div>
</div>
<div class="page">
<div class="mantletext">
<h3>jQuery</h3>
<h2>Чудесная стена 3</h2>
</div>
</div>
<div class="page">
<div class="mantletext">
<h3>jQuery</h3>
<h2>Чудесная стена 4</h2>
</div>
</div>

	$("div.frame a").hover(function()
	{
	            /*Обрезаем идентификатор ссылки до ID*/
	            var id = this.id.replace("link", "");
				var currentLink = $(this);
				/*Скрытие остальных рамок на основе номера ID*/
				hideTheRest(id);
				position = -296*id;
				/*Определяем смещение для соответствующей страницы*/
				marginnew =  pagewidth * id * -1;
				
				/*Выводим ссылку "Главная", если это не страница по умолчанию*/
				if(id > 0)
				{
				  $('#homelink').show();
				}else{
				  $('#homelink').hide();
				}
				
				/*Анимируем слайдер страниц до нового положения*/
				$('.pageslider').stop().animate({marginLeft: marginnew}, 800);
			
				/*Анимируем фон заголовка*/
				$('#wanderwall').stop().animate({backgroundPosition: '(50% ' + position +'px )'}, 500, function()
				{
				  var distance = 0;
				  var topdis   = -190;
				  var text     = currentLink.attr('alt');
				  var infoframe  = $('#infoframe');
				  
				  /*Определяем смещение для текста заголовка, чтобы вывести его рядом с рамочкой*/
				  switch(id)
				  {
				    case "1":
					     distance = 500;
						 break;
				    case "2":
					     distance = 730;
						 break;
				    case "3":
					     distance = 200;
						 break;
					case "4":
					     distance = 400;
						 topdis = -198;
						 break;
				  }
				  
				  infoframe.html(text);
				  infoframe.css('margin-left', distance + 'px');
				  infoframe.css('margin-top', topdis + 'px');
				  infoframe.fadeIn();
				});
				
				

	           
				
	}, function()
	{
	   
	   $('#infoframe').hide();
				var id = this.id.replace("link", "");
				$('#wanderwall').stop().animate({backgroundPosition: '(50% 0px)'}, 500 );	
				showTheRest();
	
	});

	function hideTheRest(id){
	
		 for (var i=1; i<5; i++){
			if (i!=id)
			{
				$('#frame' + i + ' a').css('display', 'block'); 
				$('#frame' + i).css('filter', 'alpha(opacity=90)');
				$('#frame' + i).stop().fadeTo("fast",0);
				$('#frame' + i + ' a').css('display', 'none');
				
				}
			}
			$('#infoframe').css('visibility','visible');				
		}
		
	function showTheRest(){
	    
		for (var i=1; i<5; i++){
				$('#frame' + i).stop().fadeTo("fast",0.9);
				$('#frame' + i).css('filter', 'alpha(opacity=90)');
			     $('#frame' + i + ' a').css('display', 'inline');
			      $('#frame' + i + ' a').css('display', 'block');    
			}
			
			
			$('#infoframe').css('visibility','hidden');
						
		}

body{

background: 
-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.09, rgb(153,153,153)),
    color-stop(0.55, rgb(242,242,242)),
    color-stop(0.78, rgb(240,237,240))
);
background:
-moz-linear-gradient(
    center bottom,
    rgb(153,153,153) 9%,
    rgb(242,242,242) 55%,
    rgb(240,237,240) 78%
);

}

#mantle { width:100%;  height:30px; background: 
-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.09, rgb(153,153,153)),
    color-stop(0.55, rgb(242,242,242)),
    color-stop(0.78, rgb(252,252,252))
);

background:
-moz-linear-gradient(
    center bottom,
    rgb(153,153,153) 9%,
    rgb(242,242,242) 55%,
    rgb(252,252,252) 78%
);
     
-webkit-background-origin: padding; 
-webkit-background-clip: content;
border-bottom:1px solid #fff;
		   
}

    .frame:hover{  
     -webkit-transform: rotate(-9deg);  
     -moz-transform: rotate(-9deg);  
    }  

@font-face {
    font-family: 'OptimaCyrBold';
    src: url('optima_cyr_bold-webfont.eot');
    src: url('optima_cyr_bold-webfont.eot?#iefix') format('eot'),
         url('optima_cyr_bold-webfont.woff') format('woff'),
         url('optima_cyr_bold-webfont.ttf') format('truetype'),
         url('optima_cyr_bold-webfont.svg#webfontT2rRKg9s') format('svg');
    font-weight: normal;
    font-style: normal;

}

color:#444444;
text-shadow:0 1px 0 #FFFFFF;
font-family: 'OptimaCyrBold', sans-serif;
font-size-adjust: 0.55;
font-size:25px; 
margin-top:30px; 

 /* Подсказки HTML5 */
 
 /* Устанавливаем другой курсор для ссылок с подсказками (по умолчанию подсказки используют курсор "помощь") */      
  a[data-tooltip]
        {
        cursor:pointer !important;
		
        }
  /* Стили для элементов, у которых есть атрибут data-tooltip - использование общего селектора (*) создает нагрузку на процессор,
     может быть вы будете использовать ограниченный список элементов вместо него*/
  *[data-tooltip]
        {
		
        /* Относительное позиционирование подсказок позволяет использовать position:absolute 
           для генерируемого контента */
        position:relative;        
        /* Ссылки наследуют правило для курсора !important от выше стоящего в иерархии элемента */
        cursor:help;
        text-decoration:none;   
        border-bottom:1px dotted #aaa; 
        *text-decoration:inherit;   
        *border-bottom-width:inherit;
        *border-bottom-style:inherit;        
        *cursor:inherit;
        *position:inherit;            
        }
  /* Значения по умолчанию для :before & :after */     
  *[data-tooltip]:after,
  *[data-tooltip]:before
        {
		
		
        content:"";
        /* Не выводим подсказку по умолчанию */
        opacity:0;  
        /* Устанавливаем большое значение z-index */
        z-index:999;
        
        -moz-transition-property: opacity;
        -moz-transition-duration: 2s;
        -moz-transition-delay: 1s;
        
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 2s;
        -webkit-transition-delay: 1s;
        
        -o-transition-property: opacity;
        -o-transition-duration: 2s;
        -o-transition-delay: 1s;
        
        transition-property: opacity;
        transition-duration: 2s;
        transition-delay: 1s;  
        
        text-decoration:none !important;
        outline:none;
        }
  /* Стрелочка подсказки */
  *[data-tooltip]:hover:before,
  *[data-tooltip]:focus:before
        {
        /* Небольшая прозрачность стрелочки */
        opacity:0.94;
        outline:none;
        content:"";  
        display:block;        
        position:absolute;
        top:30px;
        left:50%;
        margin:0 0 0 -5px;
        width:0;
        height:0;
        line-height:0px; 
        font-size:0px;       
        /* Устанавливаем цвет указателя подсказки */
        border-bottom:5px solid #33acfc;
        border-left:5px solid transparent;
        border-right:5px solid transparent;        
        border-top:transparent;
        -webkit-border-image:-webkit-gradient(linear, left top, left bottom, from(#33ccff), to(#33acfc));                        
        }
  /* Тело подсказки */
  *[data-tooltip]:hover:after,
  *[data-tooltip]:focus:after
        {
		
		
        /* Небольшая прозрачность подсказки */
        opacity:0.94;
        display:block;
        /* Используем атрибут data-tooltip для установки содержания*/
        content:attr(data-tooltip);
        /* Позиционируем подсказку под стрелкой и в середине текста */
        position:absolute;
        top:35px;
        left:50%;
        margin:0 0 0 -150px;
        width:290px;
        padding:10px;
        line-height:10px;
        min-height:10px; 
        color:#fcfcfc;
        font-size:16px;        
        font-weight:normal;
        font-family:helvetica neue, calibri, verdana, arial, sans-serif;
        background:#3198dd; 
        text-align:center;        
        outline:none;        
        text-decoration:none !important;                  
        background:-webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
        background:-moz-linear-gradient(top,#33acfc,#3198dd);         
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        border-radius:10px;        
        -moz-box-shadow:2px 2px 4px #ccc;
        -webkit-box-shadow:2px 2px 4px #ccc;
        box-shadow:2px 2px 4px #ccc;        
        text-shadow:#2187c8 0 1px 0px; 
		
font-family: 'OptimaCyrBold', sans-serif;
font-size-adjust: 0.55;
letter-spacing:-1px;
font-size:16px;
line-height:22px;
        }