JQuery наложение с надписью - PullRequest
Новая
       22

JQuery наложение с надписью

2 голосов
/ 12 мая 2011

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

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

THE HTML

<section id="portfoliowrapper">
<nav>
 <ul class="colum3">
        <li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item"  /></a></li>
        <li><a href="portfolio_detail.aspx" title=""><img src="/images/businesscards_single_item.jpg" alt="businesscards_single_item"  /></a></li>
        <li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item"  /></a></li>

 </ul>
</nav><!-- //navcontainer -->
</section><!-- //portfoliowrapper-->

MY CSS

 #portfoliowrapper { float: left;}
 #portfoliowrapper nav .colum3 { float: left;}
 #portfoliowrapper nav .colum3 a img { }
 #portfoliowrapper nav .colum3 li {float: left;width: 253px;height: 220px;margin-right:    10px;margin-bottom: 10px; background: #555; }
 #portfoliowrapper nav .colum3 li:last-child { margin-right: 0px;}

THE J

<script>
    $(document).ready(function () {
    $('.colum3 li a').bind('mouseover', function () {

        $(this).parent('li').css({ position: 'relative' });
        var img = $(this).children('img');
        $('<div />').text(' ').css({
            'height': img.height(),
            'width': img.width(),
            'background-color': '#000',
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'opacity': 0.6
        }).bind('mouseout', function () {
            $(this).fadeOut('fast', function () {
                $(this).remove();
            });
        }).insertAfter(this).animate({
            'opacity': 0.6
        }, 'fast');

    });

});
</script>

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

Ответы [ 3 ]

1 голос
/ 12 мая 2011

Вот и началось - я перевернул div наложения в пользу бита наложения текста, и затухал само изображение.Пока фон темный / черный, он выглядит одинаково.

http://jsfiddle.net/g6xVR/1/

0 голосов
/ 12 мая 2011

Попробуйте это: jsfiddle

Используется атрибут title для отображения в наложении.Пути к изображениям не являются полными путями, поэтому скрипка не отображает ваши изображения (поэтому она не идеальна), но вы поняли идею.

0 голосов
/ 12 мая 2011

Если вы используете вместо a, вы можете вставить тег внутрь тега, который не нарушит вашу ссылку. Просто установите span css на «display: block»

Если возможно, я бы порекомендовал написать подписи в вашей разметке, а затем скрыть их с помощью CSS, пока не произойдет наведение мыши. Это быстрее, чем создание и удаление элемента DOM при каждом наведении мыши.

...