Мне нужна помощь в поиске решения проблемы z-index с ie7.Прекрасно работает в Firefox.
Я читал другие посты, но почему-то сработавшие для них предложения не работают для меня.Я надеюсь, что кто-то может взглянуть на мой код и указать, где проблема.
См. Изображение ниже.пожалуйста, извините за размытие ... клиент не хочет, чтобы информация отображалась.
Верхняя часть (серая) представляет собой «div» с 2 ul в нем, один для текста маркера, один для миниатюр изображений.Нижняя часть идентична верхней, только ее белый цвет.
В верхней части у меня есть 3 изображения, когда «зависания» с помощью мыши показывают изображение большего размера.Как вы можете видеть, более крупное изображение находится за следующим разделом (белые) изображения, и оно должно быть поверх него.
Я предполагаю, что проблема находится где-то в z-index jquery, но я действительноне знаю.
Как я могу это исправить?Спасибо за вашу помощь.
HTML:
<body>
<div style="position:relative;width:1000px;">
<!-- Main Content -->
<h2 class="h2_pad_me">Feature Details</h2>
<div class="light pad_me">
<h3>asdf</h3>
<p>asdf</p>
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<h4>asdf:</h4>
<div>
<ul class="thumb_standard">
<li><img src="asdf.jpg" alt="asdf"/></li>
<li><img src="asdf.jpg" alt="asdf"/></li>
<li><img src="asdf.jpg" alt="asdf"/></li>
</ul>
</div>
<div class="clear_both"></div>
</div>
<div class="light pad_me">
<h3>asdf</h3>
<p>asdf</p>
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<h4>asdf:</h4>
<div>
<ul class="thumb_standard">
<li><img src="asdf.jpg" alt="asdf"/></li>
<li><img src="asdf.jpg" alt="asdf"/></li>
<li><img src="asdf.jpg" alt="asdf"/></li>
</ul>
</div>
<div class="clear_both"></div>
</div>
</div>
</body>
CSS:
<style>
ul.thumb_standard {
/*float: left;*/
list-style: none;
margin: auto;
padding: 10px;
width: 900px;
position:relative;
}
ul.thumb_standard li {
margin: 0;
padding: 5px;
float: left;
width: 210px;
height: 110px;
position: relative;
z-index:-1
}
ul.thumb_standard li img {
position: relative;
width: 200px;
height: 100px;
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
}
.clear_both{clear:both;}
.light{ background-color:#FFFFFF;}
.pad_me{padding:5px 15px 0px 15px;}
</style>
Jquery для анимированного всплывающего окна:
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.thumb_standard li").hover(function() {
$(this).css({'z-index' : '1000'}); /*Add a higher z-index value so this image stays on top*/
var li = $(this);
var img = li.find('img');
var div = li.closest('div');
// Add hover class and stop animation
li.addClass('hover');
img.stop(); /* Stop animation queue buildup*/
// Find the position relative to the div
var new_width = 700;
var new_height = 500;
var new_left = (div.width() - new_width) / 2;
var new_top = (div.height() - new_height) / 2;
// Find the position relative to the li
var li_offset = li.position();
new_left -= li_offset.left;
new_top -= li_offset.top;
img.animate({
top: '-100%',
left: new_left + 'px',
width: new_width + 'px',
height: new_height + 'px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
} , function() {
$(this).css({'z-index' : '-1'}); /*set z-index value back*/
var li = $(this);
var img = $(this).find('img');
var div = $(this).parent('div');
// Remove hover class and stop animation
li.removeClass("hover");
img.stop(); /* Stop animation queue buildup*/
var new_width = 210;
var new_height = 110;
img.animate({
top: '0px',
left: '0px',
width: new_width + 'px',
height: new_height + 'px'
}, 400); /* this value of "400" is the speed of how fast/slow this hover animates */
}); //Closes .hover()
}); //Closes .document()
</script>