1

  1. このメニューをhttp://toall.orgで取得して背景画像をフェードアウトするにはどうすればよいかと思っていたので、基本的に透明アイコンから透明テキストへのロールオーバーをオンに切り替えますか? jQuery を使用しないでください。これはプレーンCSS3で可能ですか?

  2. アイコンへのアクティブなリンクを設定することは可能ですが、不透明度は 50% ですか?

誰かがこれについて私を助けることができますか? ありがとう！

CSS

.home {
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 170px;
    height: 112px;
    background: url(../images/qui_menu.png) no-repeat;
    background-position: 0px 0px;
}

.home span {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: url(../images/qui_menu.png) no-repeat;
    background-position: 0px -112px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

.home:hover span {
    opacity: 1;
}

.services {
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 170px;
    height: 112px;
    background: url(../images/qui_menu.png) no-repeat;
    background-position: -170px 0px;
}

.services span {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: url(../images/qui_menu.png) no-repeat;
    background-position: -170px -112px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

.services:hover span {
    opacity: 1;
}

.portfolio {
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 170px;
    height: 112px;
    background: url(../images/qui_menu.png) no-repeat;
    background-position: -340px 0px;
}

.portfolio span {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: url(../images/qui_menu.png) no-repeat;
    background-position: -340px -112px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

.portfolio:hover span {
    opacity: 1;
}

.contacts {
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 170px;
    height: 112px;
    background: url(../images/qui_menu.png) no-repeat;
    background-position: -510px 0px;
}

.contacts span {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: url(../images/qui_menu.png) no-repeat;
    background-position: -510px -112px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

.contacts:hover span {
    opacity: 1;
}
4

0 に答える 0