CSS3 Transform: решение Chrome

0

Поскольку я новичок в 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 пикселей.

В чем проблема?

  • 0
    Попробуйте применить преобразование к li - jsfiddle.net/Ru4wR
  • 0
    Хороший. Пожалуйста, оставьте свой комментарий как ответ, чтобы я мог принять его, внося свой вклад в сообщество stackoverflow. Также дайте некоторое объяснение, если можете.
Показать ещё 1 комментарий
Теги:

2 ответа

1
Лучший ответ

У вас есть два варианта.

Примените преобразование к display:block li или add display:block к якорю

JSfiddle со вторым вариантом

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;
}
2

Установите display:block для элементов, которые вы трансформируете:

.button {
    display: block; /* transform needs a display value other than inline */
    text-decoration:none;
    color:#000000;
    padding:10px 20px;
    text-align:center;
}

DEMO

  • 0
    Это понятно, но я не должен принимать этот ответ, потому что @Paulie_D gives the solution first, accepted to transform the comment to answer thus provided an additional method.
  • 0
    Технически у вас есть более двух вариантов. Просто отметьте, что суть вашей проблемы в том, что вы пытаетесь применить transform к элементу, который inline который не будет работать. Вам понадобится display: block или display: inline-block чтобы преобразование имело какой-либо визуальный эффект. Существуют и другие display значения, которые также будут работать в зависимости от ваших потребностей.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню