-1

我有三个标签..

家

服务

帐户

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

3 回答 3

0

我想你想要

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 { display:block; 左边距：-11px；填充顶部：0；填充底部：0；宽度：100%；高度：0；border-bottom: 脊细 rgba(0,0,0,.3); 背景：#3D0F5F; 字体大小：1px；不透明度：0；-webkit-transition：所有 .5s；-moz 过渡：所有 .5 秒；-ms-transition：所有 .5s；-o-transition：所有 .5s；过渡：所有 0.5 秒；

}
#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;
}
于 2013-08-02T04:47:55.777 回答
0

在 CSS 中，鼠标悬停（悬停效果）可以使用:hover CSS 伪类来实现。

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

JSFiddle

于 2013-08-02T04:55:57.817 回答
0

这是示例。像这样，您可以根据您的要求制作菜单。

<html>
   <head>
      <style type="text/css">
          ul {list-style: none;padding: 0px;margin: 0px;}
          ul li {display: block;position: relative;float: left;border:1px solid #000}
          li ul {display: none;}
          ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
          white-space: nowrap;color: #fff;}
          ul li a:hover {background: #f00;}
          li:hover ul {display: block; position: absolute;}
          li:hover li {float: none;}
          li:hover a {background: #f00;}
          li:hover li a:hover {background: #000;}
          #drop-nav li ul li {border-top: 0px;}
      </style>
   </head>

   <body>
      <ul id="drop-nav">
          <li><a href="#">Support</a></li>

          <li><a href="#">Web Design</a>
             <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
             </ul>
          </li>

          <li><a href="#">Content Management</a>
             <ul>
                <li><a href="#">Joomla</a></li>
                <li><a href="#">Drupal</a></li>
                <li><a href="#">WordPress</a></li>
                <li><a href="#">Concrete 5</a></li>
             </ul>
          </li>

          <li><a href="#">Contact</a>
            <ul>
               <li><a href="#">General Inquiries</a></li>
               <li><a href="#">Ask me a Question</a></li>
            </ul>
          </li>
      </ul>
 </body>
</html>
于 2013-08-02T05:06:11.883 回答