css, скрывающий связь mouseovers

У меня есть навигационное меню, где я скрываю три из десяти связей, однако mouseover эффект все еще показывает, когда я mouseover пятно, где связи были. Как я избавляюсь от этого?

<!--example link-->
Store Links

//mouseover effects for all links
.header_nav a:hover {
    padding: 8px 8px;
    border-top: 4px solid #CC0078;
    border-bottom: 4px solid #CC0078;
}

//hiding the three links
.header_nav a span.search_link,
.header_nav a span.cat_link,
.header_nav a span.store_link {
    display: none;
}

//my attempt at hiding mouseover effects which does not work
.header_nav a:hover span.icon-search,
.header_nav a:hover span.cat_link,
.header_nav a:hover span.store_link {
    border-top: none;
    border-bottom: none;
}
0
nl ja de

2 ответы

Кажется, что вы скрываете содержание признак а не сам признак:

.header_nav a span.search_link {display:none}

Необходимо было бы скрыть весь признак иначе, это будет все еще казаться видимым в DOM, возможно с классом:



// CSS  
.header_nav a.hidden {display:none}
2
добавлено
@Christoph да, хотя тогда необходимо было бы рассмотреть, как обращаться с более старыми браузерами это didn' t поддерживают : парение псевдо элемент на чем-либо кроме элемент.
добавлено автор Matt Asbury, источник
или помещенный эффект парения на промежуток также...;)
добавлено автор Christoph, источник
хорошо, я думаю, что можно безопасно пропустить поддержку IE6 в наше время. Все другие браузеры на самом деле поддерживают это.
добавлено автор Christoph, источник

Кажется, что вы скрываете содержание признак а не сам признак:

.header_nav a span.search_link {display:none}

Необходимо было бы скрыть весь признак иначе, это будет все еще казаться видимым в DOM, возможно с классом:



// CSS  
.header_nav a.hidden {display:none}
2
добавлено
@Christoph да, хотя тогда необходимо было бы рассмотреть, как обращаться с более старыми браузерами это didn' t поддерживают : парение псевдо элемент на чем-либо кроме элемент.
добавлено автор Matt Asbury, источник
или помещенный эффект парения на промежуток также...;)
добавлено автор Christoph, источник
хорошо, я думаю, что можно безопасно пропустить поддержку IE6 в наше время. Все другие браузеры на самом деле поддерживают это.
добавлено автор Christoph, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)