Я будую сторінку, яка включає CSSПереходи, і я помітив, що не можу змусити будь-кого з них працювати, тому, щоб перевірити, чи не було "помилкою при кодуванні самих переходів, я вставив один з фрагментів прикладів W3S" на свою сторінку і перевірив її - все ще не працював.
Я використовую Chrome для перегляду сторінки, але він не повинен мати нічого спільного з браузерами, оскільки код W3S (очевидно) має всі необхідні варіації в ньому:
HTML W3S:
<div class="test"></div>
CSS W3S:
.test:hover { width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */ }
Також, коли я ставлю псевдоклас:наведіть курсор миші на, він повністю зникне в браузері, тоді як, якщо я залишу його, очевидно, він нічого не робить, тому що немає ніяких дій, які б викликали його. Я не знаю, чи це актуально?
Я дивувався, якщо, можливо, я забув включити щось в голову (я "а. Ще досить новий веб-дизайну і б.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>...</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
Хто-небудь може сказати мені, де я йду неправильно?
Відповіді:
2 для відповіді № 1Їх визначення переходу не повинно бути на :hover схилення, вона повинна бути визначена для елемента, а потім у :hover просто змініть ширину,
наприклад:
.test { width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.test:hover {width: 200px;}
цей приклад можна переглянути тут: http://jsfiddle.net/zjaPA/