a: висуньте курсор IE 7

Я намагаюся мати просту CSS-анімацію на одній кнопці (на наведенні курсору слід нагадувати, як натискати кнопку). Він працює у всіх підрозділах, окрім IE 7, який ми змушені підтримувати.

-------- EDIT --------

** ЦЕ ВИКЛЮЧЕННЯ ВИПУСКУ У IE 7: LINK

This is what is supposed to happen: LINK

будь-яка допомога з виправленням для IE 7 цінується! спасибі!

CSS:

  /*itinerary Button Style*/    
    .gallery {
background-image:url(PageImages/hover.gif);
background-repeat: no-repeat;
height: 75px;
width: 200px;
}

.gallery a{
background-image:url(PageImages/Itinerary.gif);
background-repeat: no-repeat;
height: 75px;
width: 200px;
display: block;
}

.gallery a:hover{
background: none;
}

HTML:

<div class="gallery">
        
           </div>
0
додано Змінено
Перегляди: 5
джерело
ro ru fr es pt de hi bn ar
На жаль, воно має діяти таким чином: посилання , а я можу бачити обидва зображення (без натискання та клацання) зображення) в IE 7 перекривається
додано Автор JDV590, джерело
це те, що має відбутися:
додано Автор JDV590, джерело
@ GabyakaG.Petrioli, будь-ласка, перегляньте редагування на моє запитання
додано Автор JDV590, джерело
Не могли б ви пояснити, що ви маєте на увазі, коли ви кажете, що це не працює? Що відбувається, і як він відрізняється від того, що ви очікуєте?
додано Автор Guffa, джерело
у вашому коді нічого не пов'язано з анімацією, і нічого не пов'язано з відступом .. Яка проблема? ( що має відбутися і що станеться замість .. )
додано Автор Gabriele Petrioli, джерело

3 Відповіді

IE7 won't just accept a display:block attribute on tags. You'll have to force it by applying zoom:1.

1
додано Joshua
джерело
IE це просто чудово підходить. Спробуйте jsfiddle.net/XMBWr1
додано Автор Gabriele Petrioli, джерело

Це, на мій погляд, більш чисте рішення, яке буде працювати в IE7 ( http://jsfiddle.net/YYUef/ 1/):

HTML:

Link

CSS:

a {
    /* PageImages/Itinerary.gif */
    background-image: url('http://placehold.it/50');
    display: block;
    height: 50px;
    width: 50px;
    text-indent: -99999px;
}
a:hover {
    /* PageImages/hover.gif */
    background-image: url('http://placehold.it/50/09e');
}

Вам просто потрібно змінити зображення url, і вам добре йти.

Редагування: а краще рішення, використовуючи CSS sprites . Jsfiddle тут .

a {
    background-image: url('http://i44.tinypic.com/34j3g53.gif');
    display: block;
    height: 75px;
    width: 200px;
    text-indent: -99999px;
}
a:hover {
    background-position: 0 -75px;
}
1
додано
джерело
Я хотів би додати: зображення повинні бути в режимі реального часу, тому на першому курсі воно не було порожнім.
додано Автор Kalle H. Väravas, джерело

Якщо я правильно зрозумів, проблема не відбувається на hover , але в цілому зображення вирівнюються неправильно ..

Швидше за все, питання про білий простір ..

встановити вас html на

<div class="gallery"></div>

( зніміть пробіл між тегами )

Крім того, як відповідає @scumah у своєму відповіді, чому встановити курсор як фон дина нижче посилання, а не просто змінювати зображення на посилання hover ( та видалити його з .gallery повністю )?

.gallery a:hover {
    background-image:url(PageImages/hover.gif);
}
0
додано
джерело