Проблема с браузером переходов Css3

ProgramBox

Проблема с браузером переходов Css3

Post author:admin
Запись опубликована:14 февраля, 2023
Post category:Вопросы по программированию

#html #css #css-transitions

#HTML #css #css-переходы

Вопрос:

Я искал и не могу найти решение. У меня есть раздел с идентификатором #games, и у меня есть следующая настройка ссылки.

 #games a {
    opacity: 1.0;
    filter: alpha(opacity = 100);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
}

#games a:hover {
    opacity: 0.6;
    filter: alpha(opacity = 5);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
}

 <section id="games">
    <a href="https://www.game.com" target="_blank">
        <div class="columns small-12 medium-6 large-3 col-pad">
            <img src="http://kurld.com/images/wallpapers/games-pictures/games-pictures-10.jpg">
            <h3>My Game Title</h3>
            <dl class="clearfix">
                <dd>Gamename</dd>
                <dd>Stats</dd>
            </dl>
        </div>
    </a>
</section>

Он работает в Mozilla, но у него как глючный переход. а в Chrome или explorer это вообще не работает. Я также использую foundation. Я удалил базовый css, но это не повлияло.

1. Вам не нужно переопределять переход в определении наведения. Кроме того, ваше объявление непрозрачности и фильтр непрозрачности не совпадают (60% против 5%). Это приведет к непоследовательному поведению в разных браузерах.

2. Но какова ваша точная цель здесь? Чего вы хотите достичь с помощью этого кода

Ответ №1:

используйте display:block on a , и это сработает, потому a что тег является встроенным элементом. и если вы «проверите элемент» на элементе «a», вы увидите, что он не обтекает элементы, которые находятся внутри него.

дайте мне знать, если это то, что вы искали

 #games a {
  display:block;
    opacity: 1.0;
    filter: alpha(opacity = 100);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
}

#games a:hover {
    opacity: 0.6;
    filter: alpha(opacity = 5);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
}

 <section id="games">
    <a href="https://www.game.com" target="_blank">
        <div class="columns small-12 medium-6 large-3 col-pad">
            <img src="images/games/myimage.jpg">
            <h3>My Game Title</h3>
            <dl class="clearfix">
                <dd>Gamename</dd>
                <dd>Stats</dd>
            </dl>
        </div>
    </a>
</section>

Ответ №2:

Я думаю, что в вашем transition заявлении отсутствует fade параметр — try:

 transition: opacity .5s ease-in-out;

Ответ №3:

Итак, несколько проблем, вытекающих из моего комментария к исходному сообщению.

Первое: якоря по своей природе являются встроенными элементами. Вы не можете помещать блочные элементы внутри встроенных элементов, так что здесь вступают в игру другие ответы (создайте свой якорь inline-block или block ).

Второе: вам не нужно переопределять переход при наведении курсора мыши, если вы не меняете свойства. :hover это более конкретный селектор, но он не делает недействительными другие стили для этого элемента. Вероятно, вам также следует явно добавить функцию перехода, чтобы адаптировать поведение вашего приложения к вашим потребностям и сделать стиль более читаемым.

В-третьих: непрозрачность поддерживается повсеместно после IE8, поэтому вам действительно не нужно filter . Это особенно актуально, поскольку у вас другая непрозрачность, указанная фильтром, что приведет к непоследовательному поведению.

Четвертое: переходы также широко поддерживаются. Единственный префикс, который вам действительно нужен, — это -webkit- , и даже это на самом деле не требуется большую часть времени.

Обновленный код:

 #games a {
    display: block;
    opacity: 1.0;
    
    -webkit-transition: opacity .5s ease;
            transition: opacity .5s ease;
}

#games a:hover {
    opacity: 0.6;
}

 <section id="games">
    <a href="https://www.game.com" target="_blank">
        <div class="columns small-12 medium-6 large-3 col-pad">
            <!-- This image is dead anyway, so I'm commenting it out for now -->
            <!-- <img src="http://kurld.com/images/wallpapers/games-pictures/games-pictures-10.jpg"> -->
            <h3>My Game Title</h3>
            <dl class="clearfix">
                <dd>Gamename</dd>
                <dd>Stats</dd>
            </dl>
        </div>
    </a>
</section>

Ответ №4:

Вы можете использовать display:inline-block на #game a .

 #games a {
    opacity: 1.0;
    filter: alpha(opacity = 100);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
    display:inline-block;
}

#games a:hover {
    opacity: 0.6;
    filter: alpha(opacity = 5);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
}

 <section id="games">
    <a href="https://www.game.com" target="_blank">
        <div class="columns small-12 medium-6 large-3 col-pad">
            <img src="images/games/myimage.jpg">
            <h3>My Game Title</h3>
            <dl class="clearfix">
                <dd>Gamename</dd>
                <dd>Stats</dd>
            </dl>
        </div>
    </a>
</section>

1. НЕ ИСПОЛЬЗУЙТЕ inline-block , потому что, если после этого вы добавите еще один встроенный элемент a (новый родной брат), например a , span , img все они останутся на одной строке. и я не думаю, что это то, чего хотел бы OP. смотрите здесь пример: jsfiddle.net/bcp5a4d5

2. @MihaiT МЫ ПОНЯТИЯ НЕ ИМЕЕМ 😉 чего хочет OP — может быть, это может быть зефир. Но вы абсолютно правы в отношении добавления других встроенных элементов и эффекта.