jQuery изображение наведите изображение меню накладывается рядом с фотографиями

Question

Я разрабатываю небольшое веб-приложение, которое использует jQuery довольно много. В моем приложении пользователь может навешивать изображение, которое становится больше через несколько секунд, предоставляя ему более подробную информацию.

Проблема в том, что когда изображение увеличивает изображение, оно также занимает площадь близлежащих изображений. Теперь, если пользователь перейдет ко второму красному квадрату (пронумеровано как 2), я хотел бы, чтобы уменьшенное изображение в настоящее время исчезло, и вместо этого увеличьте изображение, изображенное ниже, как квадратное два.

Я не очень художник, но я прикрепил небольшое изображение, чтобы помочь проиллюстрировать проблему.

Вкратце, как я могу сказать jQuery, чтобы обнаружить, когда мышь находится над красным квадратом номер два, но не поднимая событие, если мышь находится над зеленым квадратом.

[в моей демонстрационной картине, парящий на точке]

Hovered menu sample http://i46.tinypic.com/3y1x5.png

Answer 1

Я собираюсь предварить это первое, задавая несколько вопросов.

• Является ли коробка «1» также зеленой коробкой?
• Вы использовали z-index для размещения 1 над 2?

Если да, то вот ваше исправление.

$(document).ready(function(){ 
    $('.box').mouseover(function(){ 
     $(this).css('width', '300'); 
    }); 
    $('.box').mouseout(function(){ 
     $(this).css('width', '200'); 
    }); 
}); 

Box класс применяется ко всем 4 коробков что расширяет парила коробку 300px до усадки его обратно вниз 200px, когда от наведения мышки.

Независимо от этого, вам необходимо подробно изучить используемый процесс. Можете ли вы опубликовать код?

Answer 2

Вы не писал никакого кода, но ...

Вы можете создать несколько пустых Div тегов с теми же размерами, как их соответствующих красный квадрат, и они сидят на их красный квадрат с позиции: абсолютный и высокое значение z-индекса и функцию привязки мыши, прикрепленную к этим пустым div, которые уменьшат зеленый квадрат.

И вы можете сделать пустые divs только отображаемыми (хотя они будут скрыты для пользователя), когда зеленый квадрат будет увеличен и скрыт в противном случае.