Здравствуйте уважаемые, в javascript не силен, но возникла задача, где без него никак. Итак суть задачи: есть 3 блока расположенных в ряд с кое какой информацией, при наведении мыши на любой из блоков, ниже на всю область (во все 3 столбца) должно отображаться детальное описание того блока (изначально все 3 описания скрыты). Средствами css реализовать это очень просто (псевдо-класс hover), но проблема в том, что описание блоков не должно пропадать тогда, как отводится курсор мыши от блока, разве что его направить на другой блок с описанием, тогда вместо предыдущего должно появится новое описание. Вот как я пробовал решить задачу, но увы не работает, прошу помощи знающих, подскажите пожалуйста где я ошибаюсь, jQuery подключен, заранее благодарен… вот сам код:
jQuery('.kv').onmouseover(function() {
jQuery('.kv_text').css( 'visibility', 'visible' );
jQuery('.kv_text').css( 'opacity', '1' );
jQuery('.dom_text').css( 'visibility', 'hidden' );
jQuery('.dom_text').css( 'opacity', '0' );
jQuery('.office_text').css( 'visibility', 'hidden' );
jQuery('.office_text').css( 'opacity', '0' );
});
jQuery('.dom').onmouseover(function() {
jQuery('.dom_text').css( 'visibility', 'visible' );
jQuery('.dom_text').css( 'opacity', '1' );
jQuery('.kv_text').css( 'visibility', 'hidden' );
jQuery('.kv_text').css( 'opacity', '0' );
jQuery('.office_text').css( 'visibility', 'hidden' );
jQuery('.office_text').css( 'opacity', '0' );
});
jQuery('.office').onmouseover(function() {
jQuery('.office_text').css( 'visibility', 'visible' );
jQuery('.office_text').css( 'opacity', '1' );
jQuery('.kv_text').css( 'visibility', 'hidden' );
jQuery('.kv_text').css( 'opacity', '0' );
jQuery('.dom_text').css( 'visibility', 'hidden' );
jQuery('.dom_text').css( 'opacity', '0' );
});