IE7 ролловер не работает - PullRequest
Новая
       7

IE7 ролловер не работает

1 голос
/ 25 марта 2011

У меня есть код, который отлично работает в IE8, FF и Safari на ПК, но не в IE7.Идея состоит в том, чтобы иметь большую кнопку с фоновым изображением в теге, текстом и изображением на переднем плане.Когда пользователь переворачивает кнопку, фоновое изображение заменяется другим:

CSS: 

ul { list-style-type:none; }

ul li { display:inline; }

ul li.link a {
    position:relative;
    float:left;
    margin:0 10px 10px 0;
    background:url(templatebtn.jpg) no-repeat;
    width:294px;
    height:250px;
    display:block;
    padding:6px 0 0 6px;
    }

ul li.link a:hover {
    position:relative;
    float:left;
    margin:0 10px 10px 0;
    background:url(templatebtnover.jpg) no-repeat;
    width:294px;
    height:250px;
    display:block;
    padding:6px 0 0 6px;
    cursor:pointer;
    }

HTML: 

<ul>
<li class="link">
<a id="button1" class="btn">
<div class="btntitle"><p><strong>A title</strong></p></div>
<div class="btnpic"><img src="pic.jpg" /></div>
</a>
</li>
...
</ul>

В IE7изображение не заменяется при наведении, и курсор не меняется на указатель.Даже если я удалю большую часть мусора из css a: hover, и у меня будет только: hover {cursor: pointer;} это все еще не работает (то есть курсор не изменяется).Я гуглил это целую вечность и, должно быть, упускаю что-то очевидное ... И идеи?

Спасибо, G

1 Ответ

3 голосов
/ 25 марта 2011

Измените div на span. XHTML и HTML <5 не позволяют <code>div внутри a.

Редактировать: Да, и пока вы там, удалите p, потому что p внутри span не допускается. :)

Редактировать 2: добавить атрибут href к тегу a.

...