How can I change the visibility of the image in IE6 when it's in a td element

StackOverflow https://stackoverflow.com/questions/14270667

  •  14-01-2022
  •  | 
  •  

سؤال

What i want to do is to change visibility of the span element(which has a background image) when i hover it, which is stayed in a td element.

Everything works well in advanced browsers(including IE7,8), but it cant't work in IE6.

I can't figure it out. Have you guys encountered the same case as mine?

Code like the one below:

 <html>
 <head>
  <title> New Document </title>
  <style>
     .btn{
        cursor: pointer;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-position: 0 0;
        background-repeat: none;
        background-image: url('http://up.ekoooo.com/uploads2/allimg/091024/9_091024065737_1.jpg');
    }
    .default-hidden{
        visibility: hidden;
    }
    .hover .default-hidden{
        visibility: visible;
    }
  </style>
 </head>
 <body>
    <table>
        <tbody>
            <tr onmouseover="this.className='hover';" onmouseout="this.className='';">
                <td>
                    2222222<span class="btn default-hidden">000000</span>33333
                </td>
            </tr>
        </tbody>
    </table>
 </body>
</html>

I registered inline mouseover and mouseout event on the tr element, when you mouseover it, and then the hover class was added to it; when you mouseout the tr and I just remove the hover class name.

thanks, Khalil

هل كانت مفيدة؟

المحلول

Put the onmouseover and onmouseout event to <td> instead:

<table>
  <tbody>
    <tr>
      <td onmouseover="this.className='hover';" onmouseout="this.className='';">2222222<span class="btn default-hidden">000000</span>33333</td>
    </tr>
  </tbody>
</table>

Here is a JSFiddle

UPDATE: To deal with IE6, you can change the table structure to DIV & CSS, which is supported by IE6. Since IE6 does not support :hover CSS selector, you can also use this fix to make use of :hover in IE6: http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6/

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top