animate() on hover, влияющий на базовую ссылку

Я создаю эффект, когда я навешиваю изображение, а непрозрачность исчезает, чтобы выявить основные ссылки на другие части веб-страницы.animate() on hover, влияющий на базовую ссылку

Вот скрипт JQuery:

$(document).ready(function(){ 
    $("#columnRight,#columnRight2,#columnRight3,#columnRight4").hover(function() { 
     $(this).stop().animate({opacity: "0.2"}, 'slow'); 
    }, 
    function() { 
     $(this).stop().animate({opacity: "1"}, 'slow'); 
    }); 
});

Он нацелен на следующий HTML:

<div id="columnRight"> 
    <a href="syllabus.html">syllabus</a> 
</div>

& CSS:

#columnRight { 
    width: 735px; 
    height: 205px; 
    margin: 5px 10px 10px 5px; 
    float: left; 
    background: url('images/books.jpg');  
}

Эффект отличный за исключением двух вещей работает:

Ссылка видна через изображение, прежде чем произойдет какая-либо анимация. Я бы хотел, чтобы он был невидим перед эффектом наведения.

Ссылка наследует эффект анимации, так как я нависаю над изображением, ссылка исчезает с фоновым изображением.

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

Создайте другой DIV, который содержит ссылки и расположите его под div с фоновым изображением. Таким образом, когда я .hover, он покажет ссылки снизу.

Напишите еще один скрипт, который исчезает по ссылке, когда изображение исчезает.

источник

2012-08-24 gbutters

Я предлагаю использовать '.fadeTo()' вместо одушевленного, если вы просто изменить непрозрачность. Анимируя непрозрачность свойства, делает именно это, он управляет только свойством непрозрачности, которое не поддерживает IE <9. '.fadeTo()' позаботится о замирании кросс-браузера. Во-вторых, вы не создаете стиль для своего якоря, поэтому трудно понять, что вы подразумеваете под «ссылкой видно». – Rell

Вы должны установить z-индекс изображения на 1000 или что-то, чтобы он наложил ссылки, а затем на hover измените z-index на -1, чтобы он упал за ссылки, тогда они станут видимыми.Подумайте об этом как всплывающее окно в обратном порядке. – Laurence

@Rob Thx для комментария. Анкер имеет размер шрифта: 30 пикселей и черный. В основном якорь можно увидеть через изображение, когда я хочу, чтобы он находился ниже изображения. – gbutters

Вы можете использовать z-index и абсолютное позиционирование, чтобы заставить это работать. Вот jsFiddle демо: http://jsfiddle.net/HMxdt/10/

$("#container").hover(function() { 
    $(this).find(".overlay").stop().animate({opacity: "0.2", zIndex:"-1"}, 'fast'); 
    }, 
    function() { 
    $(this).find(".overlay").stop().animate({opacity: "1", zIndex:"1000"}, 'fast'); 
});

С .fadeTo(): http://jsfiddle.net/2akwx/1/

источник

2012-08-24 15:06:32 Laurence

Я заметил, что у вас есть три div для контейнера, наложения и ссылок. Нужно ли иметь контейнер div? Что это за функция, если у нее нет каких-либо свойств, связанных с ней? ... ну, кроме позиционирования. – gbutters

На самом деле свойства позиционирования - единственная причина, по которой она есть. «Позиция: absolute» в дочерних классах будет относиться к родительскому div, поэтому вы можете перемещать родительский div везде, где хотите. Вам нужны стили позиции, чтобы дочерние элементы накладывались друг на друга (снимайте их и смотрите, что происходит). – Laurence

Вы связываете это с DIV не фактический якорь элемента.

$("#columnRight a,#columnRight2 a,#columnRight3 a,#columnRight4 a").hover(function() { 
    // etc 
});

jsFiddle Demo

Также побочное замечание: Вы хотите, чтобы ссылка была -invisible- заранее ?? Как бы кто-нибудь знал, когда/как нависнуть над ним!

источник

2012-08-24 14:42:08

Хороший вопрос о невозможности увидеть ссылку. Я вижу, как это будет сбивать с толку. По сути, изображение настолько велико, что вряд ли будет в некоторой степени избегать зависания над ним и вызвать событие зависания, раскрывающее основной текст. – gbutters

animate() on hover, влияющий на базовую ссылку

ответ

Смежные вопросы