1

我有一个菜单栏

  • 家
  • 关于我们
  • 联系我们

我用 . 之类的符号装饰了菜单# Home # About Us # Contact #。

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

# 首页 #关于我们 # 联系我们 #

# 首页# 关于我们 #联系我们 #

# 首页 # 关于我们# 联系我们 #

无论如何要实现这一目标？不喜欢使用 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;
}
4

7 回答 7

3

可能这就是你想要的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;}
于 2012-10-31T09:52:23.323 回答
2

一个 seo 友好的例子：

<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>
于 2012-10-31T09:58:49.793 回答
0

您可以使用:hover伪选择器和一个 before 伪选择器。例如。

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

before 伪选择器将一些内容添加到元素中，在本例中为箭头。

于 2012-10-31T09:26:39.073 回答
0

尝试使用 css:hover

​ul li:hover{
  color: black;
  font: 14px;
  font-weight: bold;
}​
于 2012-10-31T09:29:19.563 回答
0 
<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;
}

像这样使用无序列表并使用悬停伪选择器更改它

于 2012-10-31T09:30:15.920 回答
0

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:"#";
}

样本 ​</p>

于 2012-10-31T09:32:23.810 回答
-1

演示解决方案：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 */
   }
于 2012-10-31T09:27:46.860 回答