CODEWITHSUNDEEP
css
martok
martok

Reputation: 479

css mouseover - Works in FF but not in IE

I have the following css which works when I mouse over it in Firefox but not IE(6).

.PageMenu{
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: inline;
    list-style-position:outside;
}

.PageMenu li{

    display: block;
    padding: 0;
    margin: 0;
    line-height: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;

}

ul#PageMenu li:hover {
   color: #000;
   background-color: #ddd; 
}

The HTML is:

<ul class="PageMenu" id="PageMenu">
    <li>       
        <a title="test" class="getPage">Click this link</a>
    </li>
    <li>
        <a title="test" href="#" class="getPage">Link text</a>
    </li>
</ul>

I'm looking for a css solution which will work in both IE(specifically 6) and Firefox.

Upvotes: 2

Views: 163

Answers (3)

Terry
Terry

Reputation: 66103

It is possible to make the <a> element clickable by using jQuery. It goes along the line of:

$('#PageMenu li').click(function(e) {
    window.location = $(this).find('a').attr('href');
    e.preventDefault();
});

Perhaps you might want to give the <li> element a CSS style for cursor, such as cursor: pointer

Upvotes: 0

mylesagray
mylesagray

Reputation: 8869

Running this HTC file seems to be the cleanest method:

Download this file: http://www.kavoir.com/wp-content/uploads/2009/01/csshover3.htc

Then add this to your CSS:

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

Otherwise you will need to go with JS, which is rather fugly:

if (!window.XMLHttpRequest)
{
    Event.observe(window, 'load', function() {
        $$('ul#PageMenu li').each( function(e) {
            Event.observe(e, 'mouseover', function() {
                Element.addClassName(e, 'hover');
            });
            Event.observe(e, 'mouseout', function() {
                Element.removeClassName(e, 'hover');
            });
        )};
    )};
}

Personally I don't see why you are still trying to support IE6, or even IE7, is there a particular reason?

Upvotes: 0

raveren
raveren

Reputation: 18523

You cannot assign a :hover rule to anything but <a> elements in IE6. Try 

ul#PageMenu a:hover {
   color: #000;
   background-color: #ddd;
}


ul#PageMenu a {
   display: block;
   width:100%;
}

Upvotes: 2

Related Questions