как получить эффект наведения с помощью jQuery ?? Это не работает для меня

Question

Я пытаюсь получить эффект наведения, подобный этому примеру .Но не мог получить это.Вот ссылка

Answer 1

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

Answer 2

Ваш тег <script> ссылается на jquery-1.2.6.min.js, который не существует. Поместите этот файл в тот же каталог, что и hovereffect.html на вашем веб-сервере.

Или, может быть, даже лучше, получите JQuery из библиотек Google:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Answer 3

На тестовой странице это ваш css:

.thumb {
list-style: none;
float: left;
background: white;
width: 250px;
position: relative;/* this makes all the difference */
}

На производственной странице:

.project .thumb {
width: 260px;
float: left;
}

Добавить position: relative к .project .thumb

Answer 4

Вы хотите указать height:150px; для вашего внешнего класса (.outer).В настоящее время он установлен на 250 пикселей, что слишком высоко.

Answer 5

Причина, по которой он не работает, в том, что вам не хватает свойства css

.project .thumb img {position:absolute}

обратите внимание, что у вас есть эта строка на тестовой странице.

то, как вы используете функцию анимирования jQuery для изменения положения верхнего изображения {top: 150px}, поэтому вам нужно установить абсолютное положение, чтобы это работало.

Также в .project .thumb a line отсутствуют его ширина и высота.

Также обратите внимание, что если вы просто добавите эту строку, эффект все равно будет не таким, как вы ожидаете. Создайте внешний div с overflow:hidden.

Answer 6

Ваше изображение 404ing из-за вашего правила CSS для .project .thumb a {}
Он указывает на «images / snbw_thumb.jpg», но вы, вероятно, захотите использовать «/images/snbw_thumb.jpg»

Неверный URL: http://dragonfly.zymichost.com/css/images/snbw_thumb.jpg

Хороший URL: http://dragonfly.zymichost.com/images/snbw_thumb.jpg

(Кроме того, похоже, что ваши страницы на самом деле не обслуживают 404 в качестве неверного URL)

Надеюсь, это поможет

-Крис

Answer 7

Это потому, что в вашем реальном проекте ваш css находится в каталоге / css.Так что ваш стиль CSS ищет /css/images/snbw_thumb.jpg, которого не существует.Измените свой стиль CSS на ../images/snbw_thumb.jpg, и он должен это исправить.