2011-06-09 64 views
0

在我的博客好家伙我使用这个脚本:的Javascript工具提示在IE无法正常工作

jQuery(document).ready(function() { 
    jQuery(".postbox").hover(function() { 
     tipinfo = $(this).find('.tipinfo'); 
     var t = jQuery(this).position() + jQuery(this).width(); 
     var leftto = t.left + jQuery(this).width() - 30; 
     tipinfo.css({ 
      top: jQuery(this).position().top + jQuery(this).height() - 2, 
      left: leftto 
     }); 
     tipinfo.show(); //vedi tooltip 
    }, function() { 
     tipinfo.hide(); //nascondi tooltip 
    }) 
}); 

工具提示完美的作品与IE以外所有浏览器。我知道国家将浏览器从微软悬停是行不通的,所以我请求你的帮助。有补救措施的问题?

我将是你的帮助,非常感谢

的CSS:

.tipinfo { 
    border-radius: 3px 3px 3px 3px; 
    color: #FFFFFF; 
    display: none; 
    position: absolute; 
    width: 350px; 
    z-index: 1000; 
} 

.bgbull { 
    background: url(images/bgbulle.png) no-repeat scroll 0 0 transparent; 
    height: 29px; 
    line-height: 35px; 
    padding-left: 50px; 
    width: 308px; 
} 

.infob { 
    background: none repeat scroll 0 0 #151515; 
    border-bottom: 1px solid #151515; 
    border-left: 1px solid #151515; 
    border-right: 1px solid #151515; 
    line-height:1.2em; 
    padding: 5px 
    ;width: 296px; 
} 

.bgbullbottom { 
    background: url(images/bgbullebottom.png) no-repeat scroll 0 0 transparent; 
    height: 29px; 
    line-height: 35px; 
    padding-left: 50px; 
    width: 308px; 
} 

HTML代码:

<div class="tipinfo" style="display:none;"> 
<div class="bgbull"></div> 
<div class="infob"> 
<h4 style="color:#494949;font-family:arial,sans-serif;font-size:12px;font-weight:bold;"><?php the_title_attribute(); ?></h4> 
<br> 
<span style="color:#bbb;"><?php the_excerpt(); ?></span> 
<br> 
<div style="margin-top:2px;border-top:1px dotted #323232;"></div><br> 
<div style="color:#bbb;"> 
<span class="info">Genere: </span><br /> 
<span class="info">Durata: </span><br /> 
<span class="info">Non sai se ti piace? </span> 
</div> 
<div class="clear"></div> 
</div> 
<div class="bgbullbottom"></div> 
</div> 
+0

你有GI ven'mouseenter'和'mouseleave'有什么作用? – 2011-06-09 19:10:03

+0

对不起,我的英文不好....你能解释一下吗? – Fask 2011-06-09 19:12:04

+0

http://api.jquery.com/mouseenter/和http://api.jquery.com/mouseleave/,但基本上没有监听mouseenter和mouseleave的监听 – 2011-06-09 19:15:32

回答

0

这好像看起来我错了:

var t = jQuery(this).position() + jQuery(this).width(); 

因为jQuery(this).position()返回对象,但jQuery(this).width()返回整数。也许你应该将其更改为:

var t = jQuery(this).position(); 
t.left += jQuery(this).width(); 
+0

谢谢,但不工作 – Fask 2011-06-09 19:26:47

+0

已添加HTML代码 – Fask 2011-06-11 06:51:14

+0

@Fask我试过你的代码与我在IE9中的修复。它的工作方式与FireFox相同:http://jsfiddle.net/UQEu8/3/ – 2011-06-13 16:46:37

0

据我知道你需要悬停行为添加到IE 8 <我不知道的jQuery添加此功能回来了,包括在你的CSS以下行:

body {/* ...*/behavior:url("/styles/csshover.htc");} 

及以下的csshover.htc(复制与原来的信用,可以找到它的上市页了)

<attach event="ondocumentready" handler="parseStylesheets" /> 
<script language="JScript"> 
/** 
* Pseudos - V1.30.050121 - hover & active 
* --------------------------------------------- 
* Peterned - http://www.xs4all.nl/~peterned/ 
* (c) 2005 - Peter Nederlof 
* 
* Credits - Arnoud Berendsen 
*   - Martin Reurings 
*   - Robert Hanson 
* 
* howto: body { behavior:url("csshover.htc"); } 
* --------------------------------------------- 
*/ 

var currentSheet, doc = window.document, activators = { 
    onhover:{on:'onmouseover', off:'onmouseout'}, 
    onactive:{on:'onmousedown', off:'onmouseup'} 
} 

function parseStylesheets() { 
    var sheets = doc.styleSheets, l = sheets.length; 
    for(var i=0; i<l; i++) 
     parseStylesheet(sheets[i]); 
} 
    function parseStylesheet(sheet) { 
     if(sheet.imports) { 
      try { 
       var imports = sheet.imports, l = imports.length; 
       for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]); 
      } catch(securityException){} 
     } 

     try { 
      var rules = (currentSheet = sheet).rules, l = rules.length; 
      for(var j=0; j<l; j++) parseCSSRule(rules[j]); 
     } catch(securityException){} 
    } 

    function parseCSSRule(rule) { 
     var select = rule.selectorText, style = rule.style.cssText; 
     if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return; 

     var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1'); 
     var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo); 
     var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1]; 
     var affected = select.replace(/:hover.*$/, ''); 
     var elements = getElementsBySelect(affected); 

     currentSheet.addRule(newSelect, style); 
     for(var i=0; i<elements.length; i++) 
      new HoverElement(elements[i], className, activators[pseudo]); 
    } 

function HoverElement(node, className, events) { 
    if(!node.hovers) node.hovers = {}; 
    if(node.hovers[className]) return; 
    node.hovers[className] = true; 
    node.attachEvent(events.on, 
     function() { node.className += ' ' + className; }); 
    node.attachEvent(events.off, 
     function() { node.className = 
      node.className.replace(new RegExp('\\s+'+className, 'g'),''); }); 
} 

function getElementsBySelect(rule) { 
    var parts, nodes = [doc]; 
    parts = rule.split(' '); 
    for(var i=0; i<parts.length; i++) { 
     nodes = getSelectedNodes(parts[i], nodes); 
    } return nodes; 
} 
    function getSelectedNodes(select, elements) { 
     var result, node, nodes = []; 
     var classname = (/\.([a-z0-9_-]+)/i).exec(select); 
     var identify = (/\#([a-z0-9_-]+)/i).exec(select); 
     var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, ''); 
     for(var i=0; i<elements.length; i++) { 
      result = tagName? elements[i].all.tags(tagName):elements[i].all; 
      for(var j=0; j<result.length; j++) { 
       node = result[j]; 
       if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' + 
        classname[1] + '\\b').exec(node.className)))) continue; 
       nodes[nodes.length] = node; 
      } 
     } return nodes; 
    } 
</script>