Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Skaczący hover w IE
Forum PHP.pl > Forum > Po stronie przeglądarki
bpawlik
Witam

mam taki kod CSS:
  1. div#navv {margin:0px;padding:0px;font-family: Tahoma, Verdana, Arial;font-size:12px;}
  2. div#navv {float:left; width:130px; background:#fff;line-height:20px;}
  3. div#navv ul {margin: 0px; padding:0px; width:130px; background:white;}
  4. div#navv li {position:relative; list-style:none; margin:0px;padding:0px;}
  5.  
  6. div#navv li.s1 {color:red;height:30px;margin:0px;}
  7. div#navv li.s2 {color:green;height:30px;margin:0px;}
  8. div#navv li.s3 {color:yellow;height:30px;margin:0px;}
  9.  
  10. div#navv li.s1 a {display:block; width:130px;height:30px;margin:0px;}
  11. div#navv li.s2 a {display:block; width:130px;height:30px;margin:0px;}
  12. div#navv li.s3 a {display:block; width:130px;height:30px;margin:0px;}
  13.  
  14. div#navv li.s1 a:hover {background-color:blue;height:30px;margin:0px;}
  15. div#navv li.s2 a:hover {background-color:blue;height:30px;margin:0px;}
  16. div#navv li.s3 a:hover {background-color:blue;height:30px;margin:0px;}
  17.  
  18. div#navv ul ul {position:absolute; top:0px; left:130px; display:none;margin:0px;}
  19. div#navv ul.l1 li.s1:hover ul.l2 {display:block;margin:0px;}
  20. div#navv ul.l2 li.s2:hover ul.l3 {display:block;margin:0px;}


i do tego taki kod w HTML

  1. body {behavior: url(css/csshover.htc);}
  2. ...
  3. <div id="navv">
  4.  
  5. <ul class="l1">
  6. <li class="s1"><a href="">Menu1</a>
  7. <li class="s1"><a href="">Menu2</a>
  8. <ul class="l2">
  9. <li class="s2"><a href="">Menu 2_1</a>
  10. <ul class="l3">
  11. <li class="s3"><a href="">Menu 2_1_1</a></li>
  12. </ul>
  13. </li>
  14. <li class="s2"><a href="">Menu 2_2</a>
  15. <ul class="l3">
  16. <li class="s3"><a href="">Menu 2_2_1</a></li>
  17. </ul>
  18. </li>
  19.  
  20. </ul>
  21. </li>
  22. <li class="s1"><a href="">Menu 3</a></li>
  23. </ul>
  24. </div>


I teraz problem, w FF, Opera wszystko jest OK, w IE 6.0 jak najadę na Menu 2 to wszystko co jest pod spodem skacze, tak samo jak najadę na Menu 2_1 to też skacze Menu 2_2.

Próbowałe już wielu rzeczy ale jakoś nic nie przynosi efektu.
Będę wdzięczy za wskazówki.
bigZbig
Jaka jest zawartosc pliku csshover.htc?
bpawlik
  1. <attach event="ondocumentready" handler="parseStylesheets" />
  2. <script language="JScript">
  3. /**
  4. * HOVER - V1.00.031224 - whatever:hover in IE
  5. * ---------------------------------------------
  6. * (c) 2003 - Peter Nederlof
  7. *
  8. * howto: body { behavior:url("csshover.htc"); }
  9. * ---------------------------------------------
  10. */
  11.  
  12. var CSSBuffer, doc = window.document;
  13.  
  14. function parseStylesheets() {
  15. var rules, sheet, sheets = doc.styleSheets;
  16. var bufferIndex = sheets.length;
  17. var head = doc.getElementsByTagName('head')[0];
  18. var buffer = doc.createElement('style');
  19.  
  20. buffer.setAttribute('media', 'screen');
  21. buffer.setAttribute('type', 'text/css');
  22. head.appendChild(buffer);
  23. CSSBuffer = sheets[bufferIndex];
  24.  
  25. for(var i=0; i<sheets.length -1; i++) {
  26. sheet = sheets[i];
  27. if(!sheet.media || sheet.media == 'screen') {
  28. rules = sheet.rules;
  29. for(var j=0; j<rules.length; j++) {
  30. parseCSSRule(rules[j]);
  31. }
  32. }
  33. }
  34. }
  35. function parseCSSRule(rule) {
  36. var select = rule.selectorText, style = rule.style.cssText;
  37. if(!select || !style || select.indexOf(':hover') < 0) return;
  38. var newSelect = select.replace(/\:hover/g, '.onHover');
  39. CSSBuffer.addRule(newSelect, style);
  40.  
  41. var affected = select.replace(/\:hover.*$/g, '');
  42. var elements = getElementsBySelect(affected);
  43. for(var i=0; i<elements.length; i++) {
  44. if(elements[i].nodeName == 'A') continue;
  45. new HoverElement(elements[i]);
  46. }
  47. }
  48.  
  49. /**
  50. * HoverElement
  51. * -------------------------
  52. * applies the hover
  53. */
  54.  
  55. function HoverElement(element) {
  56. if(element.isHoverElement) return;
  57. element.isHoverElement = true;
  58. element.attachEvent('onmouseover',
  59. function() { element.className += ' onHover'; });
  60.  
  61. element.attachEvent('onmouseout',
  62. function() { element.className = element.className.replace(/onHover/g, ''); });
  63. }
  64.  
  65. /**
  66. * domFinder
  67. * -----------------------------------
  68. * returns list of elements based on css selector
  69. */
  70.  
  71. function getElementsBySelect(rule) {
  72. var nodeList = [doc], sets = rule.split(' ');
  73. for(var i=0; i<sets.length; i++) {
  74. nodeList = domFinder.filterNodes(sets[i], nodeList);
  75. } return nodeList;
  76. }
  77.  
  78. var domFinder = {
  79. findNodes:function(tag, docs) {
  80. var res, nodes = [];
  81. for(var i=0; i<docs.length; i++) {
  82. res = docs[i].getElementsByTagName(tag);
  83. for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
  84. } return nodes;
  85. },
  86.  
  87. filterNodes:function(select, docs) {
  88. var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
  89. if(!s) return this.findNodes(select, docs);
  90. nodes = this.findNodes((rule = select.split(s))[0], docs);
  91. atr = (s == '#')? 'id':'className';
  92. for(var i=0; i<nodes.length; i++) {
  93. if(new RegExp('(^|\\s)' + rule[1] + '(\\s|$)').exec(nodes[i][atr]))
  94. filtered[filtered.length] = nodes[i];
  95. } return filtered;
  96. }
  97. }


ściągnięty z http://www.xs4all.nl/~peterned/csshover.html
erix
Mam podobny problem, ale dla :focus w <input type="text" />
W jednym <div> są dwa linki i ów input. Po kliknięciu nań pole "zawija się" do drugiego wiersza...

Również korzystam z whatever:hover
gekon
Dla IE (przez komentarze warunkowe) zaaplikuj:
  1. div#navv li a { zoom: 1; display: inline;}
erix
W moim przypadku nie działa.
gekon
@erix: W Twoim przypadku nie widziałem kodu smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.