Quad Burst Ответов: 3

Css не будет работать после изменения тега 'button' на тег 'a'

Когда я меняю свой button-tag, который имеет css-анимацию, на a-tag, некоторые части css перестают работать... Я использовал только класс, поэтому я не знаю, сколько может стоить этот вопрос.
<--HTML-->
<a class="btnNavigator2" role="button" data-target="#LoginModal" data-toggle="modal" runat="server">Login</a>

<--CSS-->
.btnNavigator2 {
    border: 1px solid #f24646;
    background: none;
    padding: 10px 20px;
    font-size: 20px;
    font-family: Consolas;
    cursor: pointer;
    transition: 0.8s;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin: 5px;
}

.btnNavigator2:hover {
    color: #f24646;
}

.btnNavigator2::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0%;
    background: #f24646;
    z-index: -1;
    transition: 0.8s;
    bottom: 0;
    height: 180%;
}

.btnNavigator2:hover::before {
    height: 0%;
}

Что он должен делать:
https://gyazo.com/786a2d9545a0aa25b564d641a7a9e248[^]

Что он делает:
https://gyazo.com/bd857bf8f31bb15106647d14ad41480a[^]

Что я уже пробовал:

Я попытался проверить, правильно ли назван каждый класс...

Anurag Gandhi

Просто проверьте, не перекрывается ли он с другим css, примененным к тегу 'a'. Если да, то вам нужно исправить это, предоставив больший приоритет прикладному классу.

3 Ответов

Рейтинг:
2

#realJSOP

Очистите кэш Вашего браузера. Это случается со мной довольно часто.

Рейтинг:
2

Richard Deeming

Я не вижу ваших скриншотов, но вставка HTML и CSS в новый JSFiddle показывает проблему:
Edit fiddle - JSFiddle[^]

То ::before не ограничивается размерами объекта. <a> элемент, тогда как он является будучи стесненным на <button> элемент.

Причина довольно проста: <a> элемент имеет значение display:inline;, тогда как <button> элемент имеет значение display:inline-block;. Явная настройка свойства display на вашем устройстве btnNavigator2 правило решает проблему:
Edit fiddle - JSFiddle[^]

.btnNavigator2 {
    ...
    display: inline-block;
}

Рейтинг:
0

Afzaal Ahmad Zeeshan

Я не вижу ничего плохого в вашем CSS или HTML, потому что вы используете имя класса, а не селектор элементов. Прежде чем вы попробуете то, что говорит Решение 2 (которое находится на один шаг дальше моего решения), попробуйте CTRL и F5, который выполнит жесткое обновление на странице и загрузит все с нуля. Это будет автоматический процесс, и ваш браузер перезагрузит все и применит.

Попробуйте этот код здесь на JSFiddle, Edit fiddle - JSFiddle[^], работает просто отлично. :-)

Если это не сработает, то хороший ответ можно найти в консолях отладки браузера. Вы можете попробовать использовать опцию Проверить элемент и посмотреть, какие стили применяются и откуда они берутся. F12 вызовет параметры вверх, наведет курсор мыши на элемент и предварительно просмотрит применяемые стили. Google Chrome даже покажет файл и номер строки, откуда берется определенный стиль.