Как подавить подсветку значка?

Я просто хочу начать с того, что я новичок в веб-разработке; Я нуб, когда дело доходит до HTML и CSS.

Сказав это: я создаю личный веб-сайт и использую структуру MaterializeCSS для оформления сайта.

На верхней панели навигации моего сайта есть два значка: значок Свяжитесь со мной и кнопка Возобновить. При нажатии на эти значки появляется некрасивая подсветка.

введите здесь описание изображения

Как это удалить? Я хочу, чтобы выделялся «вертикальный» прямоугольник (от верхней части панели навигации до нижней части панели навигации), а не горизонтальная подсветка значка.

Желаемый результат при нажатии на значок: введите здесь описание изображения

Вот соответствующий HTML:

<body>
    <header>
        <nav class="top-nav">
            <div class="nav-wrapper yellow lighten-2">
                <a href="#" class="page-title" style="color: #212121">Work Experience</a>
                <ul class="right">
                    <li>
                        <a href="#" class="waves-effect">
                            <i class="mdi-communication-message"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
</body>

html css materialize
person Nxt3    schedule 30.06.2015    source источник
comment
Я не получаю изюминку, когда использую его. Можете ли вы создать демо этого? jsfiddle.net/Manojkr/24L3gw8u/3   -  person m4n0    schedule 30.06.2015
comment
@ManojKumar Кажется, я не могу воспроизвести это со всем своим CSS. Не знаю, что здесь происходит.   -  person Nxt3    schedule 30.06.2015
comment
Скорее всего, это стиль :focus, применяемый браузером. На самом деле это функция удобства использования и доступности для тех, кто может перемещаться с помощью клавиатуры. Убрать можно, но я бы не советовал.   -  person DA.    schedule 30.06.2015
comment
@ManojKumar На этом сайте проблемы нет, к тому же она выглядит еще лучше, когда нажимаешь на нее .   -  person Nxt3    schedule 30.06.2015

Ответы (2)


arrow_upward
1
arrow_downward

Добавьте следующий селектор в свой файл css, чтобы переопределить свойство hover элемента.

<resume-selector>:hover,
<contact-me-selector>:hover {
    background-color:  <color-of-vertical-highlight>
}

Я не знаю (из кода, который вы разместили), что такое селекторы или желаемый цвет, но я надеюсь, что это поможет.

person JustWannaFly    schedule 30.06.2015

arrow_upward
1
arrow_downward

Решение довольно простое.

Создайте реализацию универсального класса с именем «li-no-hover».

Установите свойство фона в селекторе: Hover.

HTML-код:

<nav>
    <div class="nav-wrapper deep-orange accent-4">
        <a href="" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">Javascript</a></li>
            <li class="li-no-hover"><a><span class="btn">Login / SignUp</span></a></li>
        </ul>
    </div>
</nav>

CSS-код:

nav .nav-wrapper ul li.li-no-hover:hover {
  background-color: transparent; }

Примечание. Если вы хотите наоборот, просто переместите курсор с <li> на <span>.

person Manmeet S. Oberoi    schedule 11.09.2015