Поскольку я новичок в transform
и -ms-transform
и -webkit-transform
, я не могу заставить этот код работать -webkit-transform
:
<nav>
<ul>
<li><a target="_parent" href="index.php" class="button">Home</a></li>
<li><a target="_parent" href="about.html" class="button">About</a></li>
<li><a target="_parent" href="login/reg.php" class="button">Register</a></li>
<li><a target="_parent" href="private/" class="button">Member</a></li>
<li><a target="_parent" href="chat.php" class="button">Chat</a></li>
<li><a target="_parent" href="http://yo.hostei.com" class="button">URL Shortener</a></li>
<li><a target="_parent" href="http://sql17.000webhost.com/phpMyAdmin/index.php?db=a7593238_data" class="button">Admin</a></li>
</ul>
</nav>
<style>
nav {
text-align:center;
width:100%;
}
ul li {
list-style:none;
text-align:center;
display:inline-block;
}
.button {
text-decoration:none;
color:#000000;
padding:10px 20px;
text-align:center;
}
.button:hover {
-ms-transform:translateY(10px);
-webkit-transform:translateY(10px);
transform:translateY(10px);
background-color:#cccccc;
}
</style>
Поэтому, когда я <a class="button">
на <a class="button">
элемент <a class="button">
должен преобразовывать себя в 10 пикселей.
В чем проблема?
У вас есть два варианта.
Примените преобразование к display:block
li
или add display:block
к якорю
CSS
nav {
text-align:center;
width:100%;
}
ul li {
list-style:none;
text-align:center;
display:inline-block;
}
.button {
text-decoration:none;
color:#000000;
padding:10px 20px;
text-align:center;
display: block;
}
.button:hover {
-ms-transform:translateY(10px);
-webkit-transform:translateY(10px);
transform:translateY(10px);
background-color:#cccccc;
}
Установите display:block
для элементов, которые вы трансформируете:
.button {
display: block; /* transform needs a display value other than inline */
text-decoration:none;
color:#000000;
padding:10px 20px;
text-align:center;
}
@Paulie_D gives the solution first, accepted to transform the comment to answer thus provided an additional method.
transform
к элементу, который inline
который не будет работать. Вам понадобится display: block
или display: inline-block
чтобы преобразование имело какой-либо визуальный эффект. Существуют и другие display
значения, которые также будут работать в зависимости от ваших потребностей.
li
- jsfiddle.net/Ru4wR