Hover эффект перехода не работает по назначению

я создал следующую панель навигации:Hover эффект перехода не работает по назначению

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

Теперь проблема заключается в том, что, когда я помещал эту панель навигации в свой текущий проект, она выглядит как сумасшедшая. В IE и Chrome. В основном в IE, хотя (IE11). В IE эффект работает только иногда, и обычно появляется только граница, а фон не будет. И если это сработает, тогда это не все ссылки, но, возможно, только одна. В хромированном виде фон появляется, но это не тот же цвет, что и я, - только в одной из ссылок:/

Это очень запутанно, и на моем компьютере он отлично работает, когда я ставлю это в JSFiddle, в IE и Chrome. Но как только я помещаю это в свою собственную работу, это терпит неудачу. Я даже пытался удалить каждый другой CSS в свой файл, поэтому он имеет только то, что вы видите в JSFiddle, и удаляете все в теле, кроме того, что вы видите в JSFiddle.

Единственное, что осталось на странице, в верхней части, является:

<!doctype html> 

<html> 
<head> 
    <meta charset="utf-8"> 
     <title>Test site</title> 
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 
    <link rel="stylesheet" href="css/style.css" /> 

</head>

Не знаю, если я объяснил это достаточно хорошо. Но есть ли у кого-нибудь представление о том, что происходит?

Заранее спасибо.

EDIT: Я добавил несколько фотографий, чтобы показать, что я имею в виду. Первый - IE, второй - Chrome.

Internet Explorer Chrome

источник

2014-02-13 Denver Dang

У вас должно быть противоречивое правило в файле style.css – David

Но разве это не должно быть удалено, когда я удаляю все, кроме того, что вы видите в JSFiddle? –

Возможно; если правило находится в файле style.css, который вы все еще импортируете на свою страницу, тогда у вас может быть конфликт. Мы можем видеть только то, что у вас есть в Fiddle, а не весь файл стиля. Я бы рекомендовал создать ** новый ** css-файл с ** только ** правилами, которые у вас есть на скрипке, и ** ничего больше **. Посмотри, похоже ли это на скрипку. – David

Единственная проблема, которую я вижу, это переход в неправильном классе вы должны написать это

ul.nav li a { 
    font-family:'Gill Sans MT','Gill Sans', Calibri, 'Trebuchet MS', sans-serif; 
    display:inline-block; 
    padding:16px 10px 17px 10px; 
    margin-left:10px; 
    border-top:3px rgba(255,255,255,0) solid; 
    background:rgba(255,255,255,0); 
    text-decoration:none; 
    font-size:18px; 
    color:#333333; 
    webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

ul.nav li a:hover { 
    border-top:3px #61a607 solid; 
    background:rgba(97,166,7,0.05); 

}

Я не вижу никакой проблемы цвета на моей машине попробуйте код должен работать должным образом.

источник

2014-02-17 09:35:36 Alex

Hover эффект перехода не работает по назначению

ответ

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