Hover не работает над ссылками на панели навигации

Я уверен, что это простое исправление. Прошло много времени с тех пор, как я создал сайт и пытаюсь сделать так, чтобы, когда пользователь наводил на ссылки в навигационной панели зеленый> Этот оттенок: # 007D68, и когда они активны, чтобы пойти оранжевым> этот оттенок: # F68E56. Однако где-то вдоль линии я сделал ошибку.Hover не работает над ссылками на панели навигации

HTML:

<!DOCTYPE html> 
<head> 
<meta charset="utf-8"> 
<link href="EvositeCSS.css" rel="stylesheet" type="text/css"> 
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'> 
</head> 

<body> 
<div id="wrapper"> 

<div id="NavBar"> 
<nav class="navbar navbar-default navbar-fixed-top"> 

     <div id="VictoriaHouse"> 
      <img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court"> 
     </div> 
     <ul> 
     <li> <a href="Evosite.html" id="NavHome"> Home </span> </a> </li> 
     <li> <a href="#" class="NavLink"> News </a> </li> 
     <li> <a href="#" class="NavLink"> Tenants </a> </li> 
     <li> <a href="#" class="NavLink"> Heritage </a> </li> 
     <li> <a href="#" class="NavLink"> About Us </a> </li> 
     <li> <a href="#" class="NavLink"> Book the Meeting Room </a> </li> 
     <li> <a href="#" id="NavContact"> Contact Us </a> </li> 
     </ul> 
    </div> 
</nav> <!-- Ends NavBar <--> 
</div> <!-- Ends wrapper --> 
</body> 

</html>

CSS:

@charset "utf-8"; 
/* CSS Document */ 

#wrapper { 
width:100%; 
height:100%; 
margin-left:auto; 
margin-right:auto; 
} 

#VictoriaHouse { 
padding-left:200px; 
padding-top:20px; 
padding-bottom:20px; 
padding-right:120px; 
float:left; 
} 

/* NavBar formatting */ 

ul { 
float:inline-block; 
padding-top:45px; 
} 

li { 
display: inline; 
} 

a { 
font-family: Bree Serif; 
font-size:20px 
} 

a:link { 
color:black; 
background-color:white; 
} 

a:hover { 
color: #007D68; /* Green */ 
} 

a:active { 
text-decoration:none; 
color: #F68E56; /*orange */ 
} 

a:visited { 
color:black; 
text-decoration:none; 
background-color:white; 
} 

.NavLink { 
margin-left:20px; 
text-decoration:none; 
} 

#NavHome { 
margin-left:30px; 
} 

#NavContact { 
margin-left:20px; 
}

Спасибо.

источник

2015-07-10 Shadowsista

Я решил это, заменив ссылку на мой CSS и загрузочный CSS. Bootstrap переписывал мой, когда он пришел. Спасибо всем за вашу помощь. – Shadowsista

font-color является недействительным имуществом, color - это тот, который вы ищете. Попытка:

a:hover { 
    color: #007D68; /* Green */ 
}

источник

2015-07-10 23:37:07 heartyporridge

Моя ошибка, я забыл изменить это до публикации. Это тоже не работает. Я сейчас это изменю. Спасибо. – Shadowsista

Вы используете псевдоклассы в неправильном порядке. От here:

Обратите внимание, что A: парения должны быть помещены после A: линии связи и: посетили правила, так как в противном случае правила каскадирования спрячут свойство «цвета» из A: правил парения. Аналогично, поскольку A: активный помещается после A: hover, активный цвет (известь) будет применяться, когда пользователь активирует и навешивает над элементом A.

Правильный порядок должен быть:

a:link { color: red } /* unvisited links */ 
a:visited { color: blue } /* visited links */ 
a:hover { color: yellow } /* user hovers  */ 
a:active { color: lime } /* active links */

DEMO

источник

2015-07-10 23:48:23 lmgonzalves

Я изменил свой файл CSS, чтобы следовать этому порядку, однако он, похоже, не изменил мой сайт. Это очень запутанно, так как ваш пример отлично работает. – Shadowsista

Я не знаю, возможно, очистка кеша браузера ('Ctrl + F5')? – lmgonzalves

Там некоторые заблуждения, которые вы должны знать.

Во-первых, вы правильно поработали. Это было легко. Ваше заблуждение, и вы не одиноки. Многие люди разделяют это с вами, если только они не являются инженерами UI/UX, тогда они будут знать :): это: активная представляет собой активную страницу, поэтому они ожидают, что ссылка на активную страницу будет окрашена или стилизована, как они ожидали. Это неправильно.

. Активное псевдоклассы отображаются только в том случае, если ссылка активна (пока выполняется событие) для ее проверки. установите a:active {color: red}, а затем нажмите и удерживайте ссылку, и вы увидите, что она красная до тех пор, пока она удерживается. Значение события не завершено. Когда вы отпускаете, он возвращается в свое естественное состояние.

Правильный способ сделать это - создать класс .active и назначить соответствующие стили, которые вы хотите для этого класса. Затем добавляйте активный класс к этой ссылке всякий раз, когда эта страница является текущей. Вы можете сделать это на стороне клиента (JQuery или Javascript) или на стороне сервера (PHP или ASP.NET) в зависимости от вашей инфраструктуры.

Еще один большой совет, который я могу вам дать. Избегайте использования идентификаторов для стилизации. Вместо этого используйте классы. Идентификаторы не каскадируются, и они уникальны (только один на страницу), что затрудняет стиль веб-сайта и особенно для использования во всем мире. Зарезервируйте использование идентификаторов только для функций на стороне сервера.

Я бы разместить примеры, но я думаю, что информация, которую я только что дал вам вести вас через правильный путь довольно хорошо, особенно, так как это не ваш первый родео :)

enter image description here

испытания

corrected - follow link

удачи!

источник

2015-07-11 00:27:38 LOTUSMS

Я попробовал ваш пример установки: активный цвет: красный, однако, когда я тестировал его, удерживая его, он не менялся. Он по-прежнему остается синим по умолчанию с подчеркиванием, несмотря на то, что цвет был изменен, а текст-декорация не установлен. – Shadowsista

Я тоже не тестировал. Это нормальное поведение, если оно не перезаписывается в DOM или важном свойстве. Но вы должны сосредоточиться на создании .active или .current класса – LOTUSMS

Я протестировал и разместил скриншот поста, чтобы показать вам – LOTUSMS

Решение, которое я нашел, добавляло! Important; к элементам, которые не работали, например.

a:hover { 
text-decoration:none; 
color: #007D68; /* Green */ 
}

Это не работает, когда вы наводите на него курсор, это только синяя подчеркивание по умолчанию. Однако при добавлении! Важно после того, как нет, после текстового оформления он работает.

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

Если у кого-то есть более эффективное решение, тогда это будет приветствоваться, однако на данный момент это решает мою проблему.

источник

2015-07-11 00:51:13 Shadowsista

О, дорогой, я очень глуп ... решение состояло в том, что у меня был мой CSS, за которым следовал bootstrap CSS, поэтому он просто перезаписал мой. Обменивая их так, чтобы сначала загрузочный бутстр, тогда мой CSS решил это. – Shadowsista

Hover не работает над ссылками на панели навигации

ответ

Смежные вопросы