Question

我有一个菜单栏

主页
关于我们
联系我们

我已使用# Home # About Us # Contact #等符号对菜单进行了装饰。

所以，我想要实现的是当我将鼠标悬停在某个项目上时，项目颜色将被更改，以及旁边的符号。例如：

#Home＃关于我们＃与我们联系＃

#Home ＃关于我们联系我们＃

#Home＃关于我们＃与我们联系＃

无论如何要做到这一点？不想使用javascript解决方案，谢谢。

**根据要求更新了HTML标记，只是放置符号的虚拟解决方案。

我认为大多数人都误解了我的问题，我想要的不是如何将列表项悬停，我想将鼠标悬停在项目周围的符号。

//html <nav> <ul> <li># Home </li> <li># About Us </li> <li># Contact Us #</li> </ul> </nav> //css nav ul li { display: inline-block; } nav ul li:hover { font-weight: bold; }

Answer 1

愿你想要http://jsfiddle.net/cLnUW/。写这样：

<强> HTML

<ul>     
     <li><span>#</span> Home </li>     
     <li><span>#</span> About Us </li>     
     <li><span>#</span> Contact Us</li>
     <li><span>#</span></li>        
</ul>

<强> CSS

li {   display: inline-block; }
li:hover {   font-weight: bold; }
li:hover span, li:hover + li span{color:red;}

Answer 2

一个友好的例子：

<html>
    <head>
        <style>
            nav li{
                display: inline-block;
                text-decoration: none;
                color: #000;
                cursor: pointer;
            }
            nav li:hover {
                font-weight: bold;
                color: #FF0000;
            }
            nav li:before, nav li:hover:after, nav li:last-child:after {
                content:" # ";
            }
            nav li:hover + li:before {
                content:"";
            }
        </style>
    </head>
    <body>
        <nav>
          <ul>
            <li>Home</li>
            <li>About Us</li>
            <li>Contact Us</li>
          </ul>
        </nav>
    </body>
</html>

Answer 3

您可以使用:hover伪选择器以及前伪选择器。例如

.about:hover{
    color:#ff0000;
}
.about:hover:before{
    content:"->";
}

前伪选择器会在元素前面添加一些内容，在本例中为箭头。

Answer 4

尝试使用css :hover

ul li:hover{
  color: black;
  font: 14px;
  font-weight: bold;
}

Answer 5

<div id="navBar">
    <ul>
        <li><span class="symb">#</span> about</li>
        <li><span class="symb">#</span> home</li>
    </ul>
</div>

#navBar ul li:hover{
    color: red;
}
span.symb{
    padding-bottom:5px;
}

使用这样的无序列表并使用悬停伪选择器

进行更改

Answer 6

<强> HTML

<div id="menu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>
</div>

<强> CSS

#menu ul li a:hover
{
    color:Green;
}
#menu ul li a:hover:before
{
content:"$";
}

#menu ul li a:before
{
content:"#";
}

<强> SAMPLE

Answer 7

演示解决方案：http://jsfiddle.net/PBrkX/

以下代码使用示例html来显示悬停的工作原理：

 <span id='home_sym'> # Home </span>
    <span id='about_sym'> # About Us </span> 
   <span id='contact_sym'> # Contact Us </span>

  css :

  #home_sym:hover{
       background-color: required color;
       font-weight: bold;
       /* add anyother css required when hover */
   }

   #about_sym:hover{
       background-color: required color;
       font-weight: bold;
       /* add anyother css required when hover */
   }

    #contact_sym:hover{
       background-color: required color;
       font-weight: bold;
       /* add anyother css required when hover */
   }

悬停效果对菜单栏分隔线

7 个答案: