hover で 背景色を変える

LastModified
Category CSS

概要

hoverで背景アニメーション

HTML


<a id="hover-opacity" class="sample sample01">button</a>

透過

button


#hover-opacity01:hover{
    opacity: 0.5;
}

透過 アニメーション付き

button


#hover-opacity02{
    transition: opacity 0.5s;
}
#hover-opacity02:hover{
    opacity: 0.5;
}

背景色を変える アニメーション付き

button


#hover-opacity03{
    transition: all 0.5s;
}
#hover-opacity03:hover{
    background-color: #2222dd;
}