Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Перекрытие элементов (https://javascript.ru/forum/dom-window/36863-perekrytie-ehlementov.html)

imediasun1 29.03.2013 20:11

Перекрытие элементов
 
Помотрите пожалуйста ссылку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>


Часовой пояс GMT +3, время: 13:37.