Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2013, 20:11
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

Перекрытие элементов
Помотрите пожалуйста ссылкуhttp://exportgrain.org/btn_proba.php-вот так должно работать меню, когда же я подвигаю кнопки ближе друг к другу происходит перекрытие элементов class="company_btn" и class="main_btn", и меню начинает работать не верно а именно так http://exportgrain.org/btn_proba2.phpЧто можете посоветовать?Причем что интересно ИЕ отрабатывает как должно
<style>
.main_btn{
background: url(img/main_btn.png);
width: 158px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
z-index:2;
position:absolute;
margin-left:-30px;
}
#main_btn_block{
width: 70px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
margin-left:30px;
position:absolute;
}
.main_btn_hover{
background: url(img/main_btn_active.png);
width: 158px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
// margin-top:0px; /* для всех ie */
z-index:1;
position:absolute;
margin-left:-30px;
}


.company_btn{
background: url(img/company_btn.png);
width: 185px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
z-index:2;
position:absolute;


}
#company_btn_block{

width: 100px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
position:absolute;
margin-left:128px;

}
.company_btn_hover{

background: url(img/company_btn_active.png);
width: 185px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
// margin-top:0px; /* для всех ie */
z-index:1;
position:absolute;
}
#menu{
position:absolute;
}

</style>

<div id="menu">

<div id="main_btn_block">
<p><a href="#" class="main_btn" usemap="#map"></a></p>

<p><a href="#" class="main_btn_hover"></a></p>
</div><!--main_btn_block-->
<div id="company_btn_block">
<p><a href="#" class="company_btn"></a></p>
<p><a href="#" class="company_btn_hover"></a></p>
</div><!--company_btn_block-->
</div>


<script src="js/jquery-1.7.1.min.js"></script>





<script type="text/javascript">
$(document).ready(function(){
	$('#main_btn_block').stop().mouseover(function(){
		$('.main_btn').fadeOut(500);
});
		
	$('#main_btn_block').stop().mouseleave(function(){
		$('.main_btn').fadeIn(500);
});
	$('#company_btn_block').stop().mouseover(function(){
			$('.company_btn').fadeOut(500);
	});
			
		$('#company_btn_block').stop().mouseleave(function(){
			$('.company_btn').fadeIn(500);
	});
});

</script>

Последний раз редактировалось imediasun1, 29.03.2013 в 20:27.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
запретить изменение количество элементов в списке Antistas jQuery 0 05.12.2012 14:05
Определить количество отрицательных элементов массива Тип_1 Общие вопросы Javascript 3 25.06.2012 18:24
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Сгенерировать 2 последовательности и узнать сколько в них одинаковых элементов Ирина Владимировна Общие вопросы Javascript 10 24.03.2012 18:18
Перекрытие элементов (Sandr) Общие вопросы Javascript 7 25.01.2012 11:02