2012-07-01 8 views
0

У меня есть следующий код, который при наведении указателя мыши на элемент отображает div и скрывается от мыши. Это отлично работает в каждом браузере, кроме IE, вот мой код;Javascript не работает над IE

// JavaScript Document 

var baseopacity=0 
function showtext(thetext){ 
    if (!document.getElementById) 
    return 
    textcontainerobj=document.getElementById("tabledescription") 
    browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : "" 
    instantset(baseopacity) 
    document.getElementById("tabledescription").innerHTML=thetext 
    highlighting=setInterval("gradualfade(textcontainerobj)",50) 
} 

function hidetext(){ 
    cleartimer() 
    instantset(baseopacity) 
} 

function instantset(degree){ 
    if (browserdetect=="mozilla") 
     textcontainerobj.style.MozOpacity=degree/100 
    else if (browserdetect=="ie") 
     textcontainerobj.filters.alpha.opacity=degree 
    else if (document.getElementById && baseopacity==0) 
     document.getElementById("tabledescription").innerHTML="" 
} 
function cleartimer(){ 
    if (window.highlighting) clearInterval(highlighting) 
} 
function gradualfade(cur2){ 
    if (browserdetect=="mozilla" && cur2.style.MozOpacity<1) 
     cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99) 
    else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100) 
     cur2.filters.alpha.opacity+=20 
    else if (window.highlighting) 
     clearInterval(highlighting) 
} 
//<![CDATA[ 
$(window).load(function(){ 
    $(".tiptext").mouseover(function() { 
     $(this).children(".description").show(); 
    }).mouseout(function() { 
     $(this).children(".description").hide(); 
    }); 
});//]]> 

Вот HTML для одного из элементов (изображение каждого элемента);

<div id="one"> 
<div class="tiptext"><a href="http://mathremake.site40.net/"><img src="../images/web/1.png" height="180" width="300"/></a> 
<div class="description"><font face="Arial, Helvetica, sans-serif"><u>Ascension Math Page</u></font><font size="2" face="Arial, Helvetica, sans-serif"><br>Ascension Collegiate's Mathematics department web page.</br></font></div> 
</div> 
</div> 

И CSS для того же элемента;

#one { 
    top: 200px; 
    position: absolute; 
    width: 300px; 
    position: absolute; 
    left: 50%; 
    margin-left: -500px; 
    } 

Вся помощь приветствуется, спасибо. :)

+5

Пожалуйста, отступы ваш код и использовать точку с запятой, где это необходимо. Просто потому, что ваш переводчик JavaScript им не нужен, это не значит, что у человека это не так. Кроме того, при публикации на вопрос «Переполнение стека» «это не работает» обычно недостаточно для получения хороших ответов. Я бы рекомендовал редактировать ваше сообщение, включая любые ошибки, которые вы получаете. – Brad

+0

Вызывается обработчик события mouseOut? Добавьте консоль debug или 'alert ('mouseOut')', чтобы убедиться. –

+0

Кроме того, видя, что вы уже используете jQuery, вы можете использовать функции '.fadeIn()' и '$ .fadeOut()', чтобы сделать вашу анимацию для вас. –

ответ

2

IE имеет проблемы с $(window).load(), вы можете попробовать это:

$(window).bind('load', function(){ 
    ... 
}); 

или:

$(document).ready(function() { 
    $(".tiptext").hover(function() { 
     $(this).find(".description").show(); 
    }, function() { 
     $(this).find(".description").hide(); 
    }); 
}); 
+1

++ 1 innit! –

+1

@Tats_innit thanks bruv :) – undefined

0

Вы можете попробовать документ готов, и вы можете использовать .hover() функцию, которая может сделать все проще. Также я бы рекомендовал добавить display:none css собственности в ваш класс .description или создать новый класс .hide и добавить его.

Javascript

$(function(){ 
    $(".tiptext").hover(function() { 
     $(".description").show(); 
    },function() { 
     $(".description").hide(); 
    }); 
    });​ 

CSS:

.description{ 
    display:none; 
    } 

solution

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