Ссылка мерцает при наведении мыши - PullRequest
Новая
       7

Ссылка мерцает при наведении мыши

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

У меня есть изображение, на нем я разместил гиперссылку. Теперь, когда пользователь вводит мышку в изображение, эту гиперссылку нужно показать, если оставить изображение снова, гиперссылку нужно скрыть. это очень просто.

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

мой код, который я написал: 

$('img.col-image1').mouseenter(function(){
        $(this).siblings('a.plus-sign').show();   
    }).mouseleave(function(){
        $(this).siblings('a.plus-sign').hide();   
    }

)

есть какие-либо проблемы с моим кодом, или мне нужно добавить какой-либо специальный обработчик событий, чтобы избежать мерцания onmouseover на ссылке?

пожалуйста, посетите здесь:

http://jsfiddle.net/RLfNu/

Ответы [ 4 ]

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

Я разобрался с твоим решением и нашел решение, которое работало в Firefox: http://jsfiddle.net/4mhGb/

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

Я думаю, что вы поступили неправильно (как я сделал сам).

Для чего-то столь же простого, как это, вы можете сделать это с помощью CSS.Если вы хотите анимировать его, используя jQuery.fadeIn и jQuery.fadeOut, то я бы использовал JavaScript поверх CSS.

См. Мой пример на jsfiddle: http://jsfiddle.net/5pgvC/2/

Я обернул изображение и ссылкув другом div: 

    <div class="col-holder">
        <a class="removed plus-sign" href="publishing.html">next</a>
        <img class="col-image1" src="http://www.tnpsc.com/downloads/NaturesScenery.jpg" width="221" height="114" alt="Publishing" />

    </div>  
    <p>Whitefield has a deep heritage in the publishing industry. We know how content is developed, managed and consumed. </p>
    <a class="view-case-study" href="publishing.html"><span><strong>Read more</strong></span>
    </a>

Затем добавлено: наведите CSS для него: 

.col-holder:hover a.plus-sign{
    display: block;   
}

Это остановит мерцание.

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

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

Демо: http://jsfiddle.net/wdm954/zS3rc/2

<span class="hoverimg">
    <a class="removed plus-sign" href="publishing.html">next</a>
    <img class="col-image1" src="/path" width="221" height="114" alt="Publishing" />
</span>

Добавить в CSS ... 

a.plus-sign {
    display: none;
}

JQuery ... 

$('.hoverimg').hover(function(){
    $(this).find('a.plus-sign').toggle();   
});
0 голосов
/ 27 мая 2011

использование 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

поскольку IE6 страдает от мерцания

...