Question

我尝试转换按钮以轻微向左移动，我可以使用padding-right来移动按钮，这样就不会出现语法问题。对于我使用的任何属性，转换似乎根本不起作用。

不起作用的代码：

    #home:hover
{
    padding-right: 10px;

    transition: padding-right 0.3s ease;
}

CSS：

/****Font Faces****/
@font-face {
    font-family: 'bebas book';
    src: local('?'),
        url('../fonts/bebas book.woff') format('woff');
}

@font-face {
    font-family: 'bebas light';
    src: local('?'),
        url('../fonts/bebas light.woff') format('woff');
}

@font-face {
    font-family: 'bebas regular';
    src: local('?'),
        url('../fonts/bebas regular.woff') format('woff');
}


/****Hover Modifiers****/
header:hover #home, header:hover #portfolio,
header:hover #about, header:hover #contact
{
    opacity: 1;

    transition: opacity 0.3s ease;
}

header:hover #menuIcon {
    margin: 20px 50px;

    transition: margin 0.3s ease;
}

header:hover {
    width: 120px;

    transition: width 0.3s ease;
}

#home:hover
{
    padding-right: 10px;

    transition: padding-right 0.3s ease;
}


/****Page Modifiers****/
body {
    margin: 0; padding: 0;
}


/****Header Modifiers****/
header {
    margin: 0; padding: 0;
    height: 100vh; width: 60px;

    position: fixed;

    opacity: 0.85;

    background: #120C08;

    transition: width 0.3s ease;
}

#menuIcon {
    margin: 20px;

    transition: margin 0.3s ease;
}

#home, #portfolio,
#about, #contact 
{
    right: 10px;

    position: absolute;

    opacity: 0;

    text-decoration: none;

    color: #FAECD4;

    font-family: bebas book;
    font-size: 25px;

    transition: opacity 0.3s ease;
}

#home {top: 80px;} #portfolio {top: 120px;}
#about {top: 160px;} #contact {top: 200px;}


/****Body Content****/
#mainImgWrapper {
    height: 100vh; width: 100%;

    background: url("../images/mainImage.jpg") no-repeat center center fixed;
}

Answer 1

添加此

#home {
    padding-right: 0px;
    transition: opacity 0.3s ease, padding-right 0.3s ease !important;
}

...

#home:hover {
    padding-right: 10px;
}

过渡不适用于任何财产？

1 个答案: