Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Как сделать чтобы окно изчезало правильно?

Как сделать чтобы окно изчезало правильно?


     25.09.2015    Стили (CSS)    648

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

Как сделать чтобы окно изчезало правильно?



Где в ксс поправить чтобы только мышь попадает на всплывающее окно оно исчезало?

вот этот класс отвечает за окошко

.short-item {width:22.5%; margin-right:2.5%; float:left; height:360px; position:relative;}

.short-desc {position:absolute; right:100%; top:0; z-index:150; width:300px; padding:20px; background-color:#F2F2F2; display:none;
box-shadow:5px 0 10px 0 rgba(0,0,0,0.2); border: 3px solid #f08615;}


А вот скрипт отвечающий за окошко ( если править скрипт)
if ($(window).width() > 1024) {
        $('.short-item').hover(
        function() {
            var $winWidth = window.innerWidth;
            var $movieItem = $(this);
            var $moviePos = $movieItem.offset().left;
            if ($moviePos < $winWidth/2) {
                $movieItem.addClass('pop-right');
            }
            $movieItem.toggleClass('active').find('.short-desc').stop(true,true).fadeToggle(600);
        });    
    };


Ответил: grolilus


Все решил вопрос добрые люди помогли.

Вот это:
if ($(window).width() > 1024) {
        $('.short-item').hover(
        function() {
            var $winWidth = window.innerWidth;
            var $movieItem = $(this);
            var $moviePos = $movieItem.offset().left;
            if ($moviePos < $winWidth/2) {
                $movieItem.addClass('pop-right');
            }
            $movieItem.toggleClass('active').find('.short-desc').stop(true,true).fadeToggle(600);
        });    
    };


Поменял на это:
if ($(window).width() > 1024) {
        $('.short-img').hover(
        function() {
            var $winWidth = window.innerWidth;
            var $movieItem = $(this).parent();
            var $moviePos = $movieItem.offset().left;
            if ($moviePos < $winWidth/2) {
                $movieItem.addClass('pop-right');
            }
            $movieItem.toggleClass('active').find('.short-desc').stop(true,true).fadeToggle(300);
        });    
    };
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы