Question

我有三个标签..

家

服务

帐户

<ul><li><a href=#>Home</a></li>
<li><a href=#>Services</a></li>
<li><a href=#>Account</a></li></ul>

如何将css应用于列表选项卡以显示不同的鼠标悬停颜色？

怎么做？

li {
   Background-color:#696969;
   display:Inline;
}

Answer 1

我想你想要

li:hover {
background-color: New Color;
}

这是我制作的一个非常简单的下拉菜单 HTML

<div id="newsletter" class="navigation">
<span style="display:block;" id="newsletterMain" href="index.html">Newsletter</span>
<a style="margin-top:19px; border-top: ridge thin rgba(0,0,0,.3);" class="month" href="index.html">Month</a>
<a class="month" href="index.html">Month</a>
<a class="monthLast" href="index.html">Month</a>
</div>

CSS #newsletter .month { 显示：块;保证金左：-11px; padding-top：0; padding-bottom：0; 宽度：100％; 高度：0; border-bottom：ridge thin rgba（0,0,0，.3）; 背景：＃3D0F5F; 字体大小：1px的; 不透明度：0; -webkit-transition：全部.5s; -moz-transition：全部.5s; -ms-transition：全部.5s; -o-transition：全部.5s; 过渡：全部.5s;

}
#newsletter .monthLast {
    display:block; margin-left:-11px;
    padding-top: 0;
    padding-bottom: 0;
    width:100%;
    height:0;
    background:#3D0F5F;
    font-size:1px;
    opacity:0;
    -webkit-transition: all .5s;
    -moz-transition:    all .5s;
    -ms-transition:     all .5s;
    -o-transition:      all .5s;
    transition:         all .5s;

}
#newsletter:hover .month{
    display:block;
    padding-top: 5px;
    padding-bottom: 5px;
    height:auto;
    border-right: thin ridge #000;

    border-left: thin ridge #000;
    background:#F8F8F8;
    font-size:18px;
    opacity:1;


}

#newsletter:hover .monthLast {
    display:block;
    padding-top: 5px;
    padding-bottom: 5px;
    height:auto;
    border-right: thin ridge #000;
    border-bottom: thin ridge #000;
    border-left: thin ridge #000;
    background:#F8F8F8;
    font-size:18px;
    opacity:1;

}
#newsletterMain {
    color:#FFF;
    text-decoration:none;
    -webkit-transition: all .5s;
    -moz-transition:    all .5s;
    -ms-transition:     all .5s;
    -o-transition:      all .5s;
    transition:         all .5s;
}
#newsletterMain:hover {
    background: transparent;
    /*color:#BBAFFF;


    text-shadow: 0 0 15px #BB74FF;*/
}
#newsletter {
    border: thin ridge #FFF;
    border-top: none;
    background:#3D0F5F;
    color:#FFF;
    -webkit-transition: all .5s;
    -moz-transition:    all .5s;
    -ms-transition:     all .5s;
    -o-transition:      all .5s;
    transition:         all .5s;
}
#newsletter:hover {
    border: thin ridge #000;
    border-top: none;
    background:/*#CDA0FF*/#F8F8F8;
}
#newsletter #newsletterMain {
    color:#FFF;
}
#newsletter:hover #newsletterMain {
    color:#3D0F5F;
}

Answer 2

在CSS中，可以使用:hover CSS pseudo-class实现鼠标悬停（悬停效果）。

li a:hover {
    background-color:#ccc;
}

JSFiddle

Answer 3

这是一个例子。像这样你可以根据你的要求制作菜单。

如何使用css3制作有吸引力的下拉菜单？

3 个答案: