WedX - журнал о программировании и компьютерных науках

Попытка удалить отступы из меню навигации, чтобы цвета не менялись при наведении

Купленная нами тема позволяет выбирать основной и дополнительный цвета, но я хочу, чтобы при наведении курсора на главное меню навигации цвет отличался. Я не уверен, как удалить этого «ребенка» только из меню навигации. Я попытался удалить заполнение, которое сработало, но затем выравнивание было отключено. Элементы должны быть синими при наведении курсора, а не желтыми, а затем синими. Веб-сайт: https://www.stephensengineering.com/stephens33/ .

/*         Home  Navigation    */

.nav-t-holder {
    position: relative;
}
.nav-t-holder .nav-header {
    display: none;
    padding: 12px 20px;
}
.nav-t-holder .nav-t-header button {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 25px;
    border-radius: 5px;
}
.nav-t-holder .nav-t-footer {
    display: block;
}
.nav-t-holder .nav-t-footer ul.nav > li {
    display: inline-block;
    padding: 1.6em 0;
    position: relative;
}
.nav-t-holder .nav-t-footer ul.nav > li:hover a,
.nav-t-holder .nav-t-footer ul.nav > li.active a {
    color: #0071bd;
    background-color: transparent;
}
.nav-t-holder .nav-t-footer ul.nav > li:last-child > a {
    border: none;
    padding-right: 0;
}
.nav-t-holder .nav-t-footer ul.nav > li:first-child > a
{
    padding: 0 1.3em 0 0;
}
.nav-t-holder .nav-t-footer ul.nav > li > a {
    padding: 0 1.3em;
    display: block;
    color: #fff;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-right: 1px dashed #3f5262;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu {
    top: 100%;
    left: 0;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu.align-right {
    right: 0;
    left: auto;
}
.nav-t-holder .nav-t-footer ul.nav > li:hover > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    display:block;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu > li > ul.sub-menu {
    top: 0;
    left: 100%;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu > li > ul.sub-menu.align-right {
    right: 100%;
    left: auto;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu > li:hover > ul.sub-menu {
    visibility: visible;
    opacity: 1;
}
.nav-t-holder .nav-t-footer ul.nav > li ul.sub-menu {
    position: absolute;
    width: 275px;
    opacity: 0;
    display:none;
    visibility: hidden;
    z-index: 99999;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    padding-left: 0;
     box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
    -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
}
.nav-t-holder .nav-t-footer ul.nav > li ul.sub-menu li {
    display: block;
    padding: 0;
    background: #fff;
    position: relative;
}
.nav-t-holder .nav-t-footer ul.nav > li ul.sub-menu li:last-child a {
    border-bottom: 0;
}
.nav-t-holder .nav-t-footer ul.nav > li ul.sub-menu li:last-child a:after {
    display: none;
}
nav.main_menu .nav-holder .nav-t-footer ul.nav > li ul.sub-menu li:hover > a {
    color: #fff;
    background: #51c5e9;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu > li:hover > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    display:block;
}
nav.main_menu .nav-holder ul.nav.ind-menu li.current-menu-item a{
    color: #fab90a;
}

nav.main_menu .nav-holder ul.nav.ind-menu li ul.sub-menu li.current-menu-item a,nav.main_menu .nav-holder ul.nav.ind-menu li ul.sub-menu li.current-menu-item a:active  {
    color: #ffffff!important;
    background: #51c5e9;
}
nav.main_menu .nav-holder ul.nav.ind-menu li ul.sub-menu li a {
    color: #242424;
    font: 600 16px 'Open Sans', sans-serif;
    padding: 15px 25px 15px;
    border-bottom: 1px solid #e9e9e9;
    position: relative;
    display: block;
    font-weight: 600;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    text-transform: capitalize;
    text-decoration: none;
}
nav.main_menu .nav-holder ul.nav.ind-menu li ul.sub-menu li:last-child a{
    border-bottom: none;
}
.nav-t-holder ul.nav li.has-t-sub-menu > a > button {
    display: none;
}
.nav-t-holder .nav-t-header {
    display: none;
    padding: 12px 0px;
    float: right;
}
.touch_top ul .item .media .blue-color a i {
    color: #1fa6c8;
}

  • Все равно не повезло. :( 19.07.2019

Ответы:


1

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

.nav-t-holder .nav-t-footer ul.nav > li:hover a, .nav-t-holder .nav-t-footer ul.nav li.active a, .service-info a h4:hover, .nav-holder .nav-footer ul.nav > li:hover a, .nav-holder .nav-footer ul.nav > li.active a, .our-sol-wrapper p span, .single-blog-post .meta-info .content-box .post-links li i, .team .box-img .caption a {
    color: #0071bd;
}
19.07.2019

2

У вас есть два конфликтующих события наведения. При наведении курсора на <li> ссылка становится желтой. При наведении курсора на <a> ссылка становится синей.

// The culprit for the yellow colour
.nav-t-holder .nav-t-footer ul.nav > li:hover a{
    color: #ffba00;
}

// For the blue colour
nav.main_menu .nav-holder ul.nav.ind-menu li{
    color: #0071bd;
}

Вы можете изменить правила наведения <a>, чтобы установить цвет initial, что эффективно остановит изменение цвета наведения.

// Use initial to stop it interfering
nav.main_menu .nav-holder ul.nav.ind-menu li{
    color: initial;
}

Или, если это не так, просто установите оба, чтобы изменить его на желтый.

19.07.2019
Новые материалы

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

ИИ в аэрокосмической отрасли
Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


Для любых предложений по сайту: [email protected]