2015-03-25 2 views
0

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

Это мой стиль

a:hover, :visited, :active, :hover 
{ 
color:#fff; 
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
text-decoration: none; 
color: #009933; 
text-shadow: none; 
-webkit-transition: 500ms linear 0s; 
-moz-transition: 500ms linear 0s; 
transition: 500ms linear 0s; 
outline: 0 none; 
} 

https://jsfiddle.net/3qpbv5fo/

Кстати, в то время как вы на него. До сих пор читается мой код? не могли бы вы получить то, что я делал, если вам нужно продолжить строительство сайта? Просто для меня, чтобы поправиться.

+1

'a: hover,: visited,: active,: hover' - это то же самое, что' a: hover, *: visited, *: active, *: hover' ... так что это влияет на все – PlantTheIdea

ответ

1

Вы говорите, что :hover среди других элементов нет, поэтому он относится ко всему.

Недостаточно выбрать элемент a только в первом селекторе, если вы поместите запятую между вещами, они рассматриваются как полностью отдельные селекторы. Таким образом, a:hover, :hover, например, будет считаться a:hover и *:hover.

См. this для руководства по правильному написанию ссылок.

+0

ладно спасибо, я видел его на w3schools, но я видел его в другом примере того, кто делал это только с запятыми. я мог бы что-то контролировать. Другое дело, прежде чем открыть другую тему. Знаете ли вы, что когда-либо метод для правильной работы макета с каждой резолюцией? Если я посмотрю на свой сайт сейчас на моем разрешением 1920/1080. следить за моими ссылками FB и Tumbler. Я продолжаю сталкиваться с этой проблемой. Знаете любое «глобальное» решение? Google действительно не помогает. –

+0

@PatrickHunter Вы говорите об адаптивном веб-дизайне. В принципе, вам нужно будет определить размеры пикселов в окне браузера, а затем создать соответствующий стиль, и вы можете иметь несколько стилей для нескольких вариантов ширины экрана. Вы также можете использовать процентную ширину и другие вещи. Но google отзывчивый учебник по веб-дизайну, и вы найдете много вещей, например https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/. – Roope

0

Удалить :hover, потому что он воздействует на все возможные элементы, идентификатор и класс на странице. Ваш a:hover достаточен и применит эффект для всех зависающих ссылок.

0

у вас есть префикс :hover, :visited ... и т. Д. С определенным тегом или он будет влиять на всю страницу.

сделать это вместо того, чтобы

a:hover 
{ 
color:#fff; 
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
text-decoration: none; 
color: #009933; 
text-shadow: none; 
-webkit-transition: 500ms linear 0s; 
-moz-transition: 500ms linear 0s; 
transition: 500ms linear 0s; 
outline: 0 none; 
} 

Вы не можете иметь a:visited и a:active имеют один и тот же CSS, как ваш a:hover, потому что он не будет работать правильно. Для этого вам нужно сделать отдельный блок CSS. a:hover будет влиять на все ваши элементы ссылок, даже на посещаемые.

0

Вы используете :hover 2 раза в своем css, который испортит ваш код. вы должны опустить последний :hover, чтобы правильно работать с вашим кодом

+0

Это не настоящая проблема; См. Комментарий @ PlantTheldea по вопросу – Jost

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